javascript – 部分视图表单通过ajax提交以返回部分视图

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 部分视图表单通过ajax提交以返回部分视图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4531字，纯文字阅读大概需要7分钟。

内容图文

我陷入两难境地.请发送帮助！

我正在构建一个MVC 4 Web应用程序,当加载另一个局部视图的表单时,无法获得部分视图加载到页面的一部分.这是我到目前为止所做的：

在基页(ReviewPage)上,我有一个部分在加载页面时加载部分视图.像这样的东西：

@model AppV4.Models.NewCompanyRequest

@{
    ViewBag.Title = "ReviewNewRequest";
}

<h2>New Sign Up Review</h2>


<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8">
            <div id="company_notes">
                 @Html.Action("_CompanyNotes")
            </div>
        </div>
    </div>
</div>

以下是控制器中_CompanyNotes操作最初加载的局部视图(_NoNotes)：

@model AppV4.Models.ViewModels.NotesOnCompanyViewModel

<h4>Notes on Company</h4>

<div class="row text-center col-sm-6 col-sm-offset-6">
    <div class="text-center">
        <div class="primary-action-bttn-border">
            <div class="primary-action-bttn-bkg">
                @Ajax.ActionLink("Add Note", "_CompanyNotesEditGet", Model, new AjaxOptions { UpdateTargetId = "company_notes", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "btn btn-default primary-action-bttn" })
            </div>
        </div>
    </div>
</div>

<div class="row text-center padding-25-top">
    <p>There are no notes for this company.  Do you want to add some?</p>
</div>
 @Html.HiddenFor(item => Model.RequestId)

在此_NoNotes局部视图中单击“添加注释”按钮时,控制器中的_CompanyNotesEditGet操作将返回部分视图(_NotesForm),该视图将替换#company_notes div中页面上的_NoNotes.这可以正常工作.这是_NotesForm局部视图：

@model AppV4.Models.ViewModels.NotesOnCompanyViewModel

<form data-gp-ajax="true" action="@Url.Action("_CompanyNotesEditPost", "NewSignUpRequestReview")" method="post" data-gp-target="#company-notes">
    <div class="form-horizontal">
        <h4>Notes On Company</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.NotesId)
        @Html.HiddenFor(model => model.CompanyId)

        <div class="form-group">

            @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2 text-left" })
            <div class="col-md-12">
                @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

我想要发生的事情下一步：当文本输入到Notes字段并按下提交时,我希望将数据传递给控制器??,以便将其保存到数据库并使用新的部分视图替换_NotesForm部分在页面上.

当前发生的事情：当文本输入到Notes字段并按下提交时,控制器会接收数据并执行此操作.但是,它不是替换刚刚提交的表单的部分视图,而是替换整个页面.从字面上看,整个页面将替换为此局部视图的内容.

我尝试使用我在这里和其他地方找到的各种表单提交技术,但似乎没有任何东西按照我想要的方式工作.

这是应该返回局部视图的控制器动作_CompanyNotes：

[HttpPost]
public ActionResult _CompanyNotesEditPost(NotesOnCompanyViewModel notesOnCompanyViewModel)
{
    //code that reviews the notes and places it into the db//

    return PartialView("~/Views/NotesOnCompany/_CompanyNotes.cshtml", notesOnCompanyViewModel);
}

这是我编写的用于捕获提交事件,运行适当的控制器操作,然后将部分视图放回ReviewPage的JavaScript：

$(function () {
    $('form[data-gp-ajax=true]').submit(function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (viewHTML) {
                $("#company_notes").show();
                $("#company_notes").html(viewHTML);
            };
        })

        return false;
    };
});

我的理论是,我没有以某种方式用我的js代码捕获提交事件,而是提交操作直接进入我的控制器,这导致了问题.但是,我已经确保我的js脚本被添加到脚本包中,该脚本包通过_Layout视图添加到每个视图的底部.所以我真的在这里大吃一惊.想什么？

解决方法:

我尝试了事件传播方法,但仍然得到了相同的结果.提交将直接转到控制器并使用部分视图刷新整个页面,而不是js捕获事件.

我在部分视图_NotesForm上的表单标记中添加了id =“edit-company-notes”.

并写了我为事件传播写的以下js：

$('div#company_notes').on('.submit', '#edit-company-notes', function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (viewHTML) {
                $("#company_notes").show();
                $("#company_notes").html(viewHTML);
            }
        });

        return false;
    });

虽然使用’.submit’而不是’submit’完全搞笑了！那个时期导致整个事情被跳过！

以下是事件处理程序的正确js：

$('div#company_notes').on('submit', '#edit-company-notes', function () {

    var $form = $(this);

    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize(),
        success: function (viewHTML) {
            $("#company_notes").show();
            $("#company_notes").html(viewHTML);
            }
    });

    return false;
});

我希望这可以帮助别人像昨晚一样把头撞在墙上！

内容总结

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

内容备注

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

内容手机端