इनलाइन संपादन

Question

public class UserDetailsModel 
    { 
     public int ID { get; set; } 
     public string LoginID { get; set; } 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
     public string IsDeleted { get; set; } 
     public DateTime CreatedOn { get; set; } 
    } 

नियंत्रक:

public ActionResult Index() 
     { 
      object model = obj.getUserList(); 
      return View(model); 
     } 

     public ActionResult Delete(int id) 
     { 
      BAL_obj.deleteUser(id); 
      object model = obj.getUserList(); 
      return View("Index",model); 
     } 

Index.cshtml:

@model IEnumerable<WebGrid1App.Models.UserDetailsModel> 

@{ 
    WebGrid grid = new WebGrid(Model); 

} 
<h2>People</h2> 

@grid.GetHtml(
    headerStyle: "headerStyle", 
    tableStyle: "tableStyle", 
    alternatingRowStyle: "alternateStyle", 

    fillEmptyRows: true, 

    mode: WebGridPagerModes.All, 
    firstText: "<< First", 
    previousText: "< Prev", 
    nextText: "Next >", 
    lastText: "Last >>", 
    columns: new [] { 


     grid.Column("ID",header: "ID"), 
     grid.Column("LoginId",header:"LoginID"), 

     grid.Column("FirstName", canSort: false), 
     grid.Column("LastName"), 

     grid.Column("CreatedOn", 
        header: "CreatedOn", 
        format: p=>p.CreatedOn.ToShortDateString() 
     ), 

     grid.Column("", 
        header: "Actions", 
        format: @<text> 
           @Html.ActionLink("Edit", "Edit", new { id=item.ID}) 
           | 
           @Html.ActionLink("Delete", "Delete", new { id=item.ID}) 
          </text> 
     ) 
}) 

मैं हटाने आपरेशन के साथ किया है। मैं एक ही पृष्ठ पर एक पंक्ति कैसे संपादित कर सकता हूं और डेटाबेस में परिवर्तनों को सहेज सकता हूं?

संपादन बटन होगा। जब आप उस पर क्लिक करेंगे, पंक्ति संपादन योग्य होगी। इस बीच लिंक टेक्स्ट को संपादित करें लिंक के रूप में बदल दिया गया है। अब जब आप सहेजें पर क्लिक करते हैं, तो पंक्ति को अद्यतन करने की आवश्यकता होती है।

मैं इनलाइन संपादन करना चाहता हूं। क्या आप कृपया इसके साथ मेरी मदद कर सकते हैं?

Answer 1

आप AJAX का उपयोग कर सकते हैं। एक एचटीएमएल रूप है जो रिकॉर्ड संपादित करने के लिए अनुमति देगा में webGrid लपेटकर करके प्रारंभ करें:

@using (Html.BeginForm("Update", null, FormMethod.Post, new { @class = "updateForm" })) 
{ 
    @grid.GetHtml(
     headerStyle: "headerStyle", 
     tableStyle: "tableStyle", 
     alternatingRowStyle: "alternateStyle", 
     fillEmptyRows: true, 
     mode: WebGridPagerModes.All, 
     firstText: "<< First", 
     previousText: "< Prev", 
     nextText: "Next >", 
     lastText: "Last >>", 
     columns: new[] 
     { 
      grid.Column("ID",header: "ID"), 
      grid.Column("LoginId",header:"LoginID"), 
      grid.Column("FirstName", canSort: false), 
      grid.Column("LastName"), 
      grid.Column("CreatedOn", 
       header: "CreatedOn", 
       format: p=>p.CreatedOn.ToShortDateString() 
      ), 
      grid.Column("", 
       header: "Actions", 
       format: @<text> 
        @Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "edit" }) 
        | 
        @Html.ActionLink("Delete", "Delete", new { id = item.ID }) 
       </text> 
      ) 
     } 
    ) 
} 

तो फिर तुम 2 partials, संपादन के लिए एक और एक ही रिकॉर्ड प्रदर्शित करने के लिए एक हो सकता था।

EditUserDetailsModel.cshtml:

@model UserDetailsModel 

<td>@Html.EditorFor(x => x.ID)</td> 
<td>@Html.EditorFor(x => x.LoginID)</td> 
<td>@Html.EditorFor(x => x.FirstName)</td> 
<td>@Html.EditorFor(x => x.LastName)</td> 
<td>@Html.EditorFor(x => x.CreatedOn)</td> 
<td> 
    <button type="submit">Update</button> 
</td> 

DisplayUserDetailsModel:

@model UserDetailsModel 

<td>@Html.DisplayFor(x => x.ID)</td> 
<td>@Html.DisplayFor(x => x.LoginID)</td> 
<td>@Html.DisplayFor(x => x.FirstName)</td> 
<td>@Html.DisplayFor(x => x.LastName)</td> 
<td>@Html.DisplayFor(x => x.CreatedOn)</td> 
<td> 
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new { @class = "edit" }) 
    | 
    @Html.ActionLink("Delete", "Delete", new { id = Model.ID }) 
</td> 

और फिर हम हो सकता है इसी नियंत्रक कार्रवाई:

public ActionResult Edit(int id) 
{ 
    UserDetailsModel model = repository.Get(id); 
    return PartialView("EditUserDetailsModel", model); 
} 

[HttpPost] 
public ActionResult Update(UserDetailsModel model) 
{ 
    repository.Update(model); 
    return PartialView("DisplayUserDetailsModel", model); 
} 

और अंत में जावास्क्रिप्ट इस जीवित बनाने के लिए:

$('table').on('click', '.edit', function() { 
    $.ajax({ 
     url: this.href, 
     type: 'GET', 
     cache: false, 
     context: $(this).closest('tr'), 
     success: function (result) { 
      $(this).html(result); 
     } 
    }); 
    return false; 
}); 

$('.updateForm').on('submit', function() { 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     context: $('input', this).closest('tr'), 
     success: function (result) { 
      $(this).html(result); 
     } 
    }); 
    return false; 
}); 

Answer 2

answer using ajax ठीक काम करता है - लेकिन आपको यह पता होना चाहिए कि यहां कई लाइनें संपादन मोड में एक साथ हो सकती हैं।

एक समाधान एक लाइन (कम ajax अनुरोध के साथ) का केवल संपादन के लिए अनुमति देता है: http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/