如何在 Asp.Net MVC 中通过 jquery ajax 动态加载局部视图

Question

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

搜索数据模型：

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 控制器中我做了一些操作。查询 DB 和 return 使用我的 partialView 的不为空 public IEnumerable<DisplayData> data 的同一模型。

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

但是我的局部视图不是动态加载的。我很乐意提供任何帮助。

Answer 1

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

Answer 2

为您的按钮添加 onclick 方法：

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

修改你的js如下：

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

如何在 Asp.Net MVC 中通过 jquery ajax 动态加载局部视图

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

asp.net

ajax

model-view-controller

jquery

partial-views