首页 / AJAX / c# – MVC Ajax表单返回View的全部内容

c# – MVC Ajax表单返回View的全部内容

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了c# – MVC Ajax表单返回View的全部内容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4725字，纯文字阅读大概需要7分钟。

内容图文

我正在使用MVC4.在我的项目中启用并引用了不引人注目的JavaScript. Ajax脚本正在我的共享母版页中加载. FireBug报告没有错误或404.

我在我的页面中添加了一个文本框,它更新了我的Ajax表单中隐藏字段的内容.当用户按下某个键,并且KeyUp事件触发时,我通过调用强制我的Ajax表单提交：

$("form#ajaxForm").trigger("submit");

其中ajaxForm是Ajax表单的名称.这很好用.表格在幕后提交,我的控制器事件触发.根据用户的输入,使用新数据更新模型.

然而,在它变得奇怪的地方,是结果返回到我的表单.我的表单div标签的全部内容被结果替换 – 这是整个页面.

<div id="basic-modal-content"">
   <input id="breed" type="text"/>
<div>
<form id="ajaxForm" method="post" data-ajax-update="#results" data-ajax-mode="replace" data-ajax="true" action="/Poultry/ListBreeds?Length=7">
   <div id="results">
    ->THIS AREA IS GETTING REPLACED WITH THE ENTIRE FORM <-
      <div id="basic-modal-content">
      </div>
   </div>
</form>

>注意basic-modal-content现在如何包含自己,另一个基本模态内容.结果div应该只包含更新结果,而不是整个视图 – 显然.

我的代码如下：

查看(BreedSelectorPartial.cshtml)

@model IQueryable<Inert.BreedViewModel>

<script type="text/javascript">
    $(document).ready(function () {
        $("#breed").keyup(function (e) {
            $("input[name=breedSearch]").val($("#breed").val());
            $("form#ajaxForm").trigger("submit");
        });
    });
</script>

<div id="basic-modal-content">
<input id="breed" type="text" style="width:100%; height:22px;" />
    <div>
        <div style="margin-top: 4px;">
            <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
        </div>
    </div>
    @using (Ajax.BeginForm("ListBreeds", "Poultry", new AjaxOptions {UpdateTargetId = "results" }, new { id = "ajaxForm" }))
    {
        <input id="breedSearch" name="breedSearch" type="hidden" />
    }
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
        @{
            var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
            int c = Model.Count();
         }
        @grid.GetHtml(tableStyle: "webgrid",
            alternatingRowStyle: "webgrid-alternating-row",
            rowStyle: "webgrid-row-style",
            displayHeader: true)
    </div>
</div>
<script type="text/javascript" src="/scripts/jquery.simplemodal.js"></script>
<script type="text/javascript" src="/scripts/basic.js"></script>

控制器(PoultryController.cs)

[HttpPost]
public ActionResult ListBreeds(string breedSearch)
{
    InertDatabaseEntitiesConnection db = new InertDatabaseEntitiesConnection();
    var breeds = db.Breeds.Where(q => q.Name.Contains(breedSearch));
    var names = breeds.Select(q => new BreedViewModel { Name = q.Name });
    return PartialView("BreedSelectorPartial", names);
}

我不确定我在哪里出错了.我花了好几个小时试图解决这个问题.有解决方案吗

解决方法:

第一个问题是你使用了Ajax.BeginForm帮助器的错误重载(但这不会引起不良行为,它只是一个旁注)：

@using (Ajax.BeginForm(
    "ListBreeds",                                      // actionName
    "Poultry",                                         // routeValues
    new AjaxOptions { UpdateTargetId = "results" },    // ajaxOptions
    new { id = "ajaxForm" })                           // htmlAttributes
)

而你需要：

@using (Ajax.BeginForm(
    "ListBreeds",                                      // actionName
    "Poultry",                                         // controllerName
    null,                                              // routeValues
    new AjaxOptions { UpdateTargetId = "results" },    // ajaxOptions
    new { id = "ajaxForm" })                           // htmlAttributes
)

现在真正的问题是你需要将#results div放在主视图的局部和内部：

<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
    @Html.Partial("BreedSelectorPartial")
</div>

当然,如果您只需要更新WebGrid部分,那么仅将网格留在部分内部并在主视图中将表单移到外部会更有意义.

所以你的主视图现在变成：

@model IQueryable<BreedViewModel>
<script type="text/javascript">
    $(document).ready(function () {
        $("#breed").keyup(function (e) {
            $("input[name=breedSearch]").val($("#breed").val());
            $("form#ajaxForm").trigger("submit");
        });
    });
</script>

<div id="basic-modal-content">
    <input id="breed" type="text" style="width:100%; height:22px;" />
    <div>
        <div style="margin-top: 4px;">
            <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
        </div>
    </div>
    @using (Ajax.BeginForm("ListBreeds", "Poultry", null, new AjaxOptions { UpdateTargetId = "results" }, new { id = "ajaxForm" }))
    {
        <input id="breedSearch" name="breedSearch" type="hidden" />
    }
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
        @Html.Partial("BreedSelectorPartial")
    </div>
</div>

并且唯一需要更新的部分是包含网格的BreedSelectorPartial.cshtml部分：

@model IQueryable<BreedViewModel>
@{
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
}
@grid.GetHtml(
    tableStyle: "webgrid",
    alternatingRowStyle: "webgrid-alternating-row",
    rowStyle: "webgrid-row-style",
    displayHeader: true
)

内容总结

以上是互联网集市为您收集整理的c# – MVC Ajax表单返回View的全部内容全部内容，希望文章能够帮你解决c# – MVC Ajax表单返回View的全部内容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/757639.html

来源：【匿名】