如何在同一个`cshtml`页面中将具有相同字段名称的不同表单的数据发布到同一个控制器方法?

时间:2017-09-30 08:34:11

标签: jquery ajax asp.net-mvc

我在同一个cshtml页面中有多个具有相同字段名称的表单。我想在特定表单的提交按钮上将特定表单的数据发布到控制器。如何实现呢?

我已经创建了jquery方法,如下所示,

 var valSettings = {
        rules: {
            CompanyName: {
                required: true,
            },
            ContactPerson: {
                required: true,
            },
            ContactNo: {
                required: true,
            },
            EmailID: {
                required: true,
                email: true
            },
            Querytype: {
                required: function (element) {
                    if ($("input[name='Querytype'] option:selected").text() == "Kindly select") {
                        return false;
                    }
                    else {
                        return true;
                    }
                }
            }

        },
        messages: {
            CompanyName: "Company Name field should not be blank.",
            ContactPerson: "Contact Person field should not be blank.",
            ContactNo: "Contact No field should not be blank.",
            EmailID: {
                required: "Contact No field should not be blank.",
                email: "Please specify a valid email address"
            },
            Querytype: "Query Type field should not be blank.",
        },
        submitHandler: function () {

            var data = new FormData($(this).get(0));


            $.ajax({
                url: "@Url.Action("SaveContactDetails", "StaticPage")",
                type: 'POST',
                data: data,
                contentType: false,
                processData: false,
                success: function (data) {

                    if (data == 1) {
                        bootbox.alert("Contact details saved succesfully!!");
                        $(this)[0].reset();
                        //var validator = $('#frmContactIndia').validate();
                        //validator.resetForm();

                    }
                    else {
                        bootbox.alert("Error in saving contact details! Please try again later!");
                    }

                }
            });
        }
    }

    $('#frmContactIndia').validate(valSettings);

    $('#frmContactBelgium').validate(valSettings);

我的控制器动作方法,

  public int SaveContactDetails(ContactUsModel _objContactUsModel)
{
   return 1;
}

我在提交第一张表格时获得_objContactUsModel的价值。但是当我提交其他表格时,我会在_objContactUsModel中为每个字段获取空值。

Html视图,

    <form role="form" id="frmContactIndia" method="post">

        <div id="india" class="ofc-cont graytexturebg pageblock blockcontainer" data-scroll-index="1">
            <div class="container">
                <div class="innerheading">India Office</div>
                <div class="ofcinfo">
                    <div class="left-addr">
                        <div class="jbbroshkttl">India - Mumbai</div>
                        <div class="addr">
                            J.B. And Brothers Pvt. Ltd.<br />
                            Tower FC-3011/12, 3rd Floor, Bharat Diamond Bourse,<br />
                            BKC, Bandra(East), Mumbai-400051
                        </div>
                        <div class="tel">Tel : +91 22 40342222 <span>|</span> Fax : +91 22 40342299</div>
                        <div class="tel">Mktg : +91 9833812803/4/5/6 <span>|</span> +91 9769223739</div>
                        <div class="email">Email : info@jbbrothers.com</div>
                        <div class="email">Skype : jbmarketingteam</div>
                    </div>
                    <div class="right-addr">
                        <div class="jbbroshkttl">India - Surat</div>
                        <div class="addr">
                            J.B. And Brothers Pvt. Ltd.<br />
                            Patel Wadi-3, Near Shivanjali Row House, Near Natraj Cinema,<br />
                            Laldarwaja, Surat-395 004.
                        </div>
                        <div class="tel">Tel : +91 261 260 7777 <span>|</span> Fax : +91 261 260 7888</div>
                        <div class="email">Email : info@jbbrothers.com</div>
                        <div class="email">Skype : jbmarketingteam</div>
                    </div>
                </div>

                <div class="assicont">
                    <div class="assi-heading">
                        <div class="jbbroshkttl">For more assistance</div>
                    </div>

                    <div class="assi-form">
                        <div class="assirow">
                            <input type="hidden" name="ContactType" value="India - Mumbai" />
                            <div class="assiformflidwrap">
                                <input type="text" name="CompanyName" placeholder="Company name" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <input type="text" name="ContactPerson" placeholder="Contact Person" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <input type="text" name="ContactNo" placeholder="Contact No." class="assiformfildblk" />
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="assiformflidwrap">
                                <input type="text" name="EmailID" placeholder="Email ID" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <select name="Querytype" class="assiformselectflidblk">
                                    <option>Kindly select</option>
                                    <option>Website</option>
                                    <option>Sales query</option>
                                    <option>Technical Assistant</option>
                                    <option>Export / Shipment</option>
                                    <option>Accounting</option>
                                    <option>Senior management</option>
                                    <option>Director</option>
                                    <option>Human Resource</option>
                                    <option>Other</option>
                                </select>
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="assiformflidwrap assitextareawrap">
                                <textarea name="queryDetail" placeholder="Query" class="assiformtextareablk"></textarea>
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="ibvm">
                                <input type="submit" id="btnSubmit" value="submit now" class="green-btn uppercase" />
                            </div>
                            <div class="ibvm">
                                <input type="reset" value="Reset" class="gray-btn uppercase" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>


   <form role="form" id="frmContactBelgium" method="post">

        <div id="belgium" class="bluetexturebg ofc-cont pageblock blockcontainer" data-scroll-index="2">
            <div class="container">
                <div class="innerheading whitecolor">Belgium - Antwerpen</div>
                <div class="addrdetails">
                    <div class="addr">
                        Yaelstar BVBA<br />
                        30 Hoveniersstraat, Box 154, Suite # 807, 8th Floor,<br />
                        B - 2018, Antwerp, Belgium.
                    </div>
                </div>
                <div class="addrdetails">
                    <div class="tel">Tel : +32 3231 0022 <span>|</span> Fax : +32 3231 5623</div>
                    <div class="tel">Mktg : +32 477 678020</div>
                </div>
                <div class="addrdetails">
                    <div class="email">Email : yaelstar@telenet.be</div>
                    <div class="email">Skype : riikesh</div>
                </div>

                <div class="assicont">
                    <div class="assi-heading">
                        <div class="jbbroshkttl">For more assistance</div>
                    </div>

                    <div class="assi-form">
                        <div class="assirow">
                            <input type="hidden" name="ContactType" value="Belgium - Antwerpen" />
                            <div class="assiformflidwrap">
                                <input type="text" name="CompanyName" placeholder="Company name" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <input type="text" name="ContactPerson" placeholder="Contact Person" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <input type="text" name="ContactNo" placeholder="Contact No." class="assiformfildblk" />
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="assiformflidwrap">
                                <input type="text" name="EmailID" placeholder="Email ID" class="assiformfildblk" />
                                <span>*</span>
                            </div>
                            <div class="assiformflidwrap">
                                <select name="Querytype" class="assiformselectflidblk">
                                    <option>Kindly select</option>
                                    <option>Website</option>
                                    <option>Sales query</option>
                                    <option>Technical Assistant</option>
                                    <option>Export / Shipment</option>
                                    <option>Accounting</option>
                                    <option>Senior management</option>
                                    <option>Director</option>
                                    <option>Human Resource</option>
                                    <option>Other</option>
                                </select>
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="assiformflidwrap assitextareawrap">
                                <textarea name="queryDetail" placeholder="Query" class="assiformtextareablk"></textarea>
                                <span>*</span>
                            </div>
                        </div>
                        <div class="assirow">
                            <div class="ibvm">
                                <input type="submit" id="btnSubmit" value="submit now" class="green-btn uppercase" />
                            </div>
                            <div class="ibvm">
                                <input type="reset" value="Reset" class="gray-btn uppercase" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>

1 个答案:

答案 0 :(得分:0)

this未引用submitHandler中的表单元素。要获取当前form,您可以使用form参数。

submitHandler: function (form) {
   var data = new FormData(form);

    $.ajax({
        url: "@Url.Action("SaveContactDetails", "StaticPage")",
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        success: function (data) {

            if (data == 1) {
                bootbox.alert("Contact details saved succesfully!!");
                form.reset(); // you need to change this as well
            }
            else {
                bootbox.alert("Error in saving contact details! Please try again later!");
            }

        }
    });
}

If you use HTML Helpers to create your form,那么您无需手动处理所有这些验证。您只需将Required等验证属性添加到属性中即可。