Asp.net एमवीसी 4 में सरल अजाक्स Beginform का उपयोग कैसे करें?

Question

मैं एएसपीनेट एमवीसी में नया हूं और मैंने Ajax.BeginForm पर शोध किया लेकिन जब मैं कोड लागू करता हूं तो यह काम नहीं करता है। क्या आप व्यू, कंट्रोलर, मॉडल के साथ Ajax.Beginform के साथ बहुत सरल उदाहरण साझा कर सकते हैं? धन्यवाद।

Answer 1

सरल उदाहरण: टेक्स्टबॉक्स और खोज बटन के साथ फ़ॉर्म।

यदि आप textbox में "नाम" लिखते हैं और फॉर्म सबमिट करते हैं, तो यह आपको तालिका में "नाम" वाले रोगियों को लाएगा।

दृश्य:

@using (Ajax.BeginForm("GetPatients", "Patient", new AjaxOptions {//GetPatients is name of method in PatientController 
    InsertionMode = InsertionMode.Replace, //target element(#patientList) will be replaced 
    UpdateTargetId = "patientList", 
    LoadingElementId = "loader" // div with .gif loader - that is shown when data are loading 
})) 
{ 
    string patient_Name = ""; 
    @Html.EditorFor(x=>patient_Name) //text box with name and id, that it will pass to controller 
    <input type="submit" value="Search" /> 
} 

@* ... *@ 
<div id="loader" class=" aletr" style="display:none"> 
    Loading...<img src="~/Images/ajax-loader.gif" /> 
</div> 
@Html.Partial("_patientList") @* this is view with patient table. Same view you will return from controller *@ 

_patientList.cshtml:

@model IEnumerable<YourApp.Models.Patient> 

<table id="patientList" > 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.Name) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Number) 
    </th>  
</tr> 
@foreach (var patient in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => patient.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => patient.Number) 
    </td> 
</tr> 
} 
</table> 

Patient.cs

public class Patient 
{ 
    public string Name { get; set; } 
    public int Number{ get; set; } 
} 

PatientController.cs

public PartialViewResult GetPatients(string patient_Name="") 
{ 
    var patients = yourDBcontext.Patients.Where(x=>x.Name.Contains(patient_Name)) 
    return PartialView("_patientList", patients); 
} 

और यह भी रूप में TSmith टिप्पणी में कहा, नहींं NuGet के माध्यम से jQuery विनीत अजाक्स पुस्तकालय स्थापित करने के लिए भूल जाते हैं।

Answer 2

पिछले पोस्ट निर्देश इसके अलावा, मैं पैकेज Microsoft.jQuery.Unobtrusive.Ajax स्थापित करें और निम्न पंक्ति

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

Answer 3

दृश्य में जोड़ने के लिए किया था सभी इस कार्य :)

मॉडल

public partial class ClientMessage 
    { 
     public int IdCon { get; set; } 
     public string Name { get; set; } 
     public string Email { get; set; } 
    } 

नियंत्रक

public class TestAjaxBeginFormController : Controller{ 

projectNameEntities db = new projectNameEntities(); 

     public ActionResult Index(){ 
      return View(); 
     } 

     [HttpPost] 
     public ActionResult GetClientMessages(ClientMessage Vm) { 
      var model = db.ClientMessages.Where(x => x.Name.Contains(Vm.Name)); 
      return PartialView("_PartialView", model); 
     } 
} 

index.cshtml देखें

@model projectName.Models.ClientMessage 
@{ 
    Layout = null; 
} 

<script src="~/Scripts/jquery-1.9.1.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script> 
    //\\\\\\\ JS retrun message SucccessPost or FailPost 
    function SuccessMessage() { 
     alert("Succcess Post"); 
    } 
    function FailMessage() { 
     alert("Fail Post"); 
    } 
</script> 

<h1>Page Index</h1> 

@using (Ajax.BeginForm("GetClientMessages", "TestAjaxBeginForm", null , new AjaxOptions 
{ 
    HttpMethod = "POST", 
    OnSuccess = "SuccessMessage", 
    OnFailure = "FailMessage" , 
    UpdateTargetId = "resultTarget" 
}, new { id = "MyNewNameId" })) // set new Id name for Form 
{ 
    @Html.AntiForgeryToken() 

    @Html.EditorFor(x => x.Name) 
    <input type="submit" value="Search" /> 

} 


<div id="resultTarget"> </div> 

देखें _PartialView.cshtml

@model IEnumerable<projectName.Models.ClientMessage > 
<table> 

@foreach (var item in Model) { 

    <tr> 
     <td>@Html.DisplayFor(modelItem => item.IdCon)</td> 
     <td>@Html.DisplayFor(modelItem => item.Name)</td> 
     <td>@Html.DisplayFor(modelItem => item.Email)</td> 
    </tr> 

} 

</table>