Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Simple example: Form with textbox and Search button. </p> <p>If you write "name" into the <code>textbox</code> and submit form, it will brings you patients with "name" in table.</p> <p><strong>View:</strong></p> <pre><code>@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=&gt;patient_Name) //text box with name and id, that it will pass to controller &lt;input type="submit" value="Search" /&gt; } @* ... *@ &lt;div id="loader" class=" aletr" style="display:none"&gt; Loading...&lt;img src="~/Images/ajax-loader.gif" /&gt; &lt;/div&gt; @Html.Partial("_patientList") @* this is view with patient table. Same view you will return from controller *@ </code></pre> <p><strong>_patientList.cshtml:</strong></p> <pre><code>@model IEnumerable&lt;YourApp.Models.Patient&gt; &lt;table id="patientList" &gt; &lt;tr&gt; &lt;th&gt; @Html.DisplayNameFor(model =&gt; model.Name) &lt;/th&gt; &lt;th&gt; @Html.DisplayNameFor(model =&gt; model.Number) &lt;/th&gt; &lt;/tr&gt; @foreach (var patient in Model) { &lt;tr&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; patient.Name) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; patient.Number) &lt;/td&gt; &lt;/tr&gt; } &lt;/table&gt; </code></pre> <p><strong>Patient.cs</strong></p> <pre><code>public class Patient { public string Name { get; set; } public int Number{ get; set; } } </code></pre> <p><strong>PatientController.cs</strong></p> <pre><code>public PartialViewResult GetPatients(string patient_Name="") { var patients = yourDBcontext.Patients.Where(x=&gt;x.Name.Contains(patient_Name)) return PartialView("_patientList", patients); } </code></pre> <p>And also as TSmith said in comments, don´t forget to install <em>jQuery Unobtrusive Ajax</em> library through <a href="https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax">NuGet</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload