Question

假设我有一套机构，每个机构都知道他的父亲是谁，而且机构可以有很多孩子。现在我为这个问题创建了一组级联下拉列表，所以在第一次找到那些没有父亲的时候（如果可能的话，为0级），一旦用户选择了一个项目，第二个列表上的列表就会加载其子项（如果是有任何孩子）等等到第3层，继承我的代码：

Index.cshtml：

@model  WebUI.Controllers.IndexViewModel
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>




 @Html.Partial("ParentEstablishments",Model)
 <div id="FirstHeritage">@Html.Partial("FirstHeritageChildren",Model)</div>
 <div id="SecondHeritage">@Html.Partial("SecondHeritageChildren",Model)</div>

每个局部视图都有一个如下形式的ajax形式：

@model WebUI.Controllers.IndexViewModel

@using (Ajax.BeginForm("SelectParent","Ticket",new   AjaxOptions{UpdateTargetId="FirstHeritage"}))
{

 <fieldset>
    <legend>Entidad departamental</legend>

    @Html.DropDownListFor( 
        m => m.SelectedParentId , 
        new SelectList( Model.AvailableParents , "EstablishmentId" , "Name" ) , 
        "[Por favor seleccione una entidad departamental]" 
    )
    <input type="submit" value="Select" />
</fieldset>
}

所以我想要创建的是一个提交按钮，让用户告诉我他选择了他需要的实体，并在我的控制器上调用一个方法，我检查每个id的值，我试图把部分视图放在里面一个表单，但ajax表单的每个提交按钮调用我创建的表单的方法，如何在不干扰ajax表单的情况下创建按钮？

Answer 1

基本上你不能。使AJAX形式为AJAX形式的脚本绑定到提交事件，因此任何提交都将被捕获。

请记住，ASP.NET中的所有HTML帮助程序和控件都可以涵盖常见的场景，并且当您实际处于常见场景时，可以让您的生活更轻松。您的代码获得的“自定义”越多（例如第二个提交按钮，它将执行常规POST而不是AJAX POST），您需要做的工作量越多（使用内置帮助程序和控件的次数就越少）。

只需创建一个常规表单（Html.BeginForm），添加两个提交按钮，然后在AJAX版本上附加一个click事件，然后自己将POST作为AJAX发送。

Answer 2

像下面一样修改按钮。

<input type="button" value="Select" class="btnSubmit" />

Mofify表格标记，如下所述

@using (Ajax.BeginForm("SelectParent","Ticket", FormMethod.Post, 
                                                          new { id = "myForm" }))
{
}

修改Div，如下所述。添加一个属性，该属性的值与Controller的Action方法相对应。

<div id="FirstHeritage" attr-Url="@Url.Action("ActionName", "ControllerName", 
new { area = "AreaName" })"></div>

现在在Jquery。请按照以下步骤操作。

加载部分视图
获取Div属性值
使用“开启”按钮事件。
Ajax请求

<强> JQuery的

$(document).ready(function () {
    var FirstHeritage = $('#FirstHeritage');
    var url = FirstHeritage.attr('attr-Url');
    FirstHeritage.load(url, function () {
        var $form = $('#myForm');
        $.validator.unobtrusive.parse($form);
        $(document).on('click', '.btnSubmit', function () {
            if ($form.valid()) {
                $.ajax({
                    url: Url,
                    async: true,
                    type: 'POST',
                    beforeSend: function (xhr, opts) {

                    },
                    contentType: 'application/json; charset=utf-8',
                    complete: function () { },
                    success: function (data) {
                        $form.html(data);
                        $form.removeData('validator');
                        $form.removeData('unobtrusiveValidation');
                        $.validator.unobtrusive.parse($form);
                    }
                });
            }
        });
    });
});

希望这会对你有所帮助。

两个表单上的提交按钮

2 个答案: