How to dynamically load partial view Via jquery ajax in Asp.Net MVC

Question

I have page where i need input data and submit form. Page should dynamically load partialView through ajax. What i have:

SearchData Model:

public class SearchData
{
    public SearchData()
    {
        documents = GetDocuments();
        data = new List<DisplayData>();
    }
    public bool isAdmin { get; set; }
    public string emc { get; set; }
    public string receiver { get; set; }
    public DateTime receiveDateFrom { get; set; }
    public DateTime receiveDateTo { get; set; }
    public int document { get; set; }
    public List<SelectListItem> documents { get; set; }
    public IEnumerable<DisplayData> data { get; set; }
}

Above DisplayData is a model of my partial View Show.

My main Index view is below:

   @model web_archive_monitoring.Models.SearchData

    @{
        ViewBag.Title = "View";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    @using (Html.BeginForm())
    {
        <table>
            <tr>
                <td>
                    <div class="form-group">
                        @Html.LabelFor(model => model.emc)
                        <br />
                        <div class="col-md-10">
                            @Html.TextBoxFor(model => model.emc, new { @class = "form-control" })@*, @placeholder = "Password"*@
                            @Html.ValidationMessageFor(model => model.emc, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </td>            
                <td>
                    <div class="form-group">
                        @Html.LabelFor(model => model.receiveDateFrom)
                        <br />
                        <div class="col-md-10">
                            @if (Model.isAdmin)
                            {
                                @Html.TextBoxFor(model => model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.receiveDateFrom, "", new { @class = "text-danger" })
                            }
                            else
                            {
                                @Html.TextBoxFor(model => model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
                            }
                        </div>
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        @Html.LabelFor(model => model.receiveDateTo)
                        <br />
                        <div class="col-md-10">
                            @if (Model.isAdmin)
                            {
                                @Html.TextBoxFor(model => model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.receiveDateTo, "", new { @class = "text-danger" })
                            }
                            else
                            {
                                @Html.TextBoxFor(model => model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
                            }
                        </div>
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        @Html.LabelFor(model => model.receiver)
                        <br />
                        <div class="col-md-10">
                            @Html.DropDownListFor(model => model.receiver, Model.receivers, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.receiver, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        @Html.LabelFor(model => model.document)
                        <br />
                        <div class="col-md-10">
                            @Html.DropDownListFor(m => m.document, Model.documents, new { @id = "reg", @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.document, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </td>            
            </tr>
        </table>
        <br />
        <br />
        <div class="form-group">
            <input type="submit" value="Search" class="btn btn-default"/>
        </div>
    }

    <div id="search">
        @{
            Html.RenderPartial("DisplayData", Model.data);
        }
    </div>

My partial View only display data that user queried.

@model IEnumerable<web_archive_monitoring.Models.DisplayData>


<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.emc)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sendDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.docCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sendAmount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.receiveAmount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.productCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.financePeriod)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.deliveryStatus)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.receiveDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.emcStatus)
        </th>
        @*<th></th>*@
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.emc)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sendDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.docCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sendAmount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.receiveAmount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.productCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.financePeriod)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.deliveryStatus)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.receiveDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.emcStatus)
        </td>
        @*<td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>*@
    </tr>
}

</table>

Here is my jquery call:

<script>
    var url = '@Url.Action("DisplayData", "Show")';
    $('form').submit(function () {        
        alert("debug1");
        var form = $(this).serialize();
        alert("data is: " + form);        
        $('#search').load(url, form);
        alert(url);
    })
</script>

And in the DisplayData controller i do some manipulation. query DB and return the same model with not empty public IEnumerable<DisplayData> data that uses my partialView.

public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model);
}

But my partial View is not dynamically loaded. I will be glad for any help.

Answer 1

add onclick method to your button:

<input type="submit" value="Search" onclick=addPatient(); class="btn btn-default"/>

Change your js as follows:

function addPatient() {
   $('#search').load('/DisplayData');
}

Answer 2

Assign Id submit to submit button

<input type="submit" value="Search" id="submit" class="btn btn-default"/>

Change your js as follows:

var url = '@Url.Action("DisplayData", "Show")';
$('#submit').on('click',function(e){
 e.preventDefault();
$.ajax({
    type: "POST",
    url: url,
    data:$('form').serialize(),
}).done(function (r) {
   $('#search').html(r);

}).fail(function (e) {
    console.log(e.responseText);
});
});    

Change Controller code accordingly:

public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model.data);
}