jquery - 如何在Asp.Net MVC中通过jquery ajax动态加载部分 View

我有需要输入数据并提交表单的页面。页面应该通过ajax动态加载partialView。我有的：

SearchData模型：

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; }
}

在DisplayData上方是我的局部视图Show的模型。

我的主要Index视图如下：

   @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>

我的局部视图仅显示用户查询的数据。

@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>

这是我的jQuery调用：

<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>

然后在DisplayData控制器中进行一些操作。查询数据库并返回使用我的partialView的不为空的public IEnumerable<DisplayData> data相同的模型。

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

但是我的局部视图不是动态加载的。我会很高兴为您提供任何帮助。

最佳答案

分配ID submit提交按钮

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

如下更改您的js：

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);
});
});

相应地更改控制器代码：

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