通过.ascx和ajax加载的ASP.NET MVC表单提交多次

|| 我有Resorts.aspx,它通过Ajax将来自ResortProducts.ascx的内容加载到div中。 Resorts.aspx
<script type=\"text/JavaScript\" src=\"http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js\">
</script>

    <script type=\"text/javascript\">

        $(function () {
            // View Resort Rates >>
            $(\'.ViewResortRatesLink\').click(function () {
                var sID = getQueryStringParameterByName(\"sID\", this.href);
                sID = sID.replace(\"~\", \"\");
                renderCart(\"div\" + sID, \"Loading Resort Product Information...\");
                $.ajax({
                    url: this.href,
                    success: function (result) {
                        renderCart(\"div\" + sID, result)
                    }
                });
                return false;
            });
        });

        function renderCart(container, data) {
            $(\"#\" + container).html(data);
        }
这是在jQuery上方触发的ActionLink的代码:
                        <%= Html.ActionLink(
                                    \"View Resort Rates >>\",
                                    \"ResortProducts\", 
                                    \"Resorts\",
                                    new { sID = _supplier.SupplierID },
                                    new { @class = \"ViewResortRatesLink\" })%> 
这是Div:
<div id=\"div<% =ResortSupplierID %>\"></div>
ResortProducts.ascx加载Resort产品列表,每个产品包含其自己的形式,可以使用该形式将产品添加到购物车。 ResortProducts.ascx
<%@ Control Language=\"C#\" Inherits=\"System.Web.Mvc.ViewUserControl<TrlSite.Services.ViewModels.ResortsView>\" %>
<script type=\"text/JavaScript\" src=\"http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js\">
</script>
   <script type=\"text/javascript\">
        $(function () {
            //+ Add to cart
            $(\".addProductToCartForm\").submit(function (e) {
                e.preventDefault();
                var HiddenCartForm = {
                    SupplierID: $(this.hSupplierID).val(),
                    Code: $(this.hProductCode).val(),
                };
                $.post($(this).attr(\"action\"), HiddenCartForm, function (data) {
                    renderCart(\"rightColumn\", data)
                });
                return false; // form already submitted using ajax, don\'t submit it again the regular way 
            });
        });

        function renderCart(container, data) {
            $(\"#\" + container).html(data);
        } 
    </script>

<% foreach (var _supplier in Model.resorts) { %>
<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" id=\"tb_PAL\">
    <tr>
        <td colspan=\"2\" width=\"15%\">&nbsp;</td>
        <td colspan=\"2\">
            <table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" style=\"table-layout:fixed;\">
                <tr>
                    <td colspan=\"6\"><hr /></td>
                </tr>
                <tr style=\"font-weight:bold;\">
                    <td>ROOM TYPE</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td align=\"center\">PRICE</td>
                </tr>
                <tr>
                    <td colspan=\"6\"><hr /></td>
                </tr>
                <% 
                    foreach (var _product in products)
                    { %>
                    <tr>
                        <td colspan=\"2\" align=\"left\" valign=\"top\"><% = _product.Description %></td>
                        <td  align=\"left\">
                            <% using (Html.BeginForm(\"AddToCart\", \"ShoppingCart\", FormMethod.Post, new { @class = \"addProductToCartForm\" }))
                                { %>
                                <input type=\"hidden\" name=\"hSupplierID\" id=\"hSupplierID\" value=\"<% = _supplier.SupplierID %>\" />
                                <input type=\"hidden\" name=\"hProductCode\" id=\"hProductCode\" value=\"<% = _product.Code %>\" />
                                <input type=\"submit\" value=\"+ Add to cart\" />
                            <% } %>
                        </td>
                        <td valign=\"top\" align=\"center\">
                            <span id=\"roomprice_\" onclick=\"return false;\" style=\"text-decoration:none;cursor:default;color:#000000\">
                                $<% = _product.TotalPrice %>
                            </span>
                        </td>
                    </tr>
                <% } %>    
                <tr >                       
                    <td colspan=\"4\">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan=\"5\"><hr /></td>
    </tr>                   
</table>
<% } %>
Resorts.aspx中可能有多个“查看度假村价格>> \”链接,单击每个链接将加载包含相应产品列表的ResortProducts.ascx。如果我仅在Resorts.aspx中加载一次ResortProducts.ascx,然后单击“提交”按钮,则一切正常。它过帐表单一次。但是,如果我多次加载.ascx,则该表单将提交提交的次数。我该如何解决这个问题?当我提交表单时,应该只发布一次,同时我应该能够发布多个表单。
已邀请:
我尚未对此进行测试,我相信如果您多次添加此控件,那么javascript部分也会被创建多次。检查是否发生了这种情况,如果是这样,我认为最好的方法是将javascript部分放在其自己的js文件中,然后在包含控件的页面中一次引用javascript文件。我希望这有帮助。
更新资料 我只是在初始帖子的评论中读了相同的答案... 我知道这篇文章越来越老了,但是我也遇到了类似的问题。首先,我正在使用.NET 3.5,MVC 2.0,jQuery 1.8,bootstrap 2.0。我要引用的局部视图实际上是一个用户控件(ascx),它代表具有几个字段和验证的窗体,该窗体作为模式对话框打开。 其次,这是我所做的: 我将部分视图(用户控件)的javascript文件移到了父视图,因为即使在一次调用部分视图的情况下,它也被调用了多次。 但是随后,部分视图内的jQuery绑定停止工作,因为javascript是在加载部分视图的内容之前执行的。 我发现的解决方案是修改绑定类型以使用jQuery实时绑定,并且它有效。 希望对您有所帮助!

要回复问题请先登录注册