2提交表单上的按钮 [英] two submit buttons on a form

问题描述

可以说我有一组机构，每个机构知道谁他的父亲是和建立可以有很多孩子的。现在我创建了一套级联的下拉列表中这个问题，所以在第一次磨片发现，没有父亲（0层如果可能）的那些，当用户选择的项目列入儿童加载的第二份名单上的列表中（如果它有子）等，直到3级，我的继承人code：

lets say I have a set of establishments, each establishments know who his father is and a establishment can have many childs. now I created a set of cascading dropdowns for this problem so on the first whe find the ones that have no father ( tier 0 if you might), once the user selects an item the list on the second list its children are loaded ( if it has any children) and so on until tier 3, heres my code:

Index.cshtml：

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的形式类似如下：

Each partial view has an ajax form like the following:

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

所以我要创建的是一个提交按钮，让用户告诉我HES选择他需要和调用一个方法我的控制器，其中i检查每一个ID为一个值的实体，我试图把局部视图内一个形式，而是每一个提交的Ajax表单按钮调用我创建窗体的方法，我怎样才能让一个按钮不与阿贾克斯形式的干扰？

推荐答案

修改按钮如下图所示。

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

下面所提到的 Mofify表单标签

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

修改股利如下所述。加入这将有相应的它的控制器的操作方法值的属性。

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

现在jQuery中。请按照以下步骤。

1. 加载局部视图


2. 获取股利属性值


3. 使用在按钮的事件。


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

希望这会帮助你。

Hope this will help you.

这篇关于2提交表单上的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！