Question

我创建了一个名为AddCust.cshtml的弹出窗口。一旦用户点击btnSaveConsumer，它应该选择输入的所有值。但我不知道如何通过控制器。我尝试使用如下的javascript，但它没有从AddCust.cshtml传递任何东西。请指教，谢谢

AddCust.cshtml

@model HHIMS_Web_App.Models.ConsumerModel
@{

}

<br />
<div>

<fieldset id="AddNewConsumer">


                      <br /> <br />
        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.HRN)
                @Html.EditorFor(model => model.HRN)
            </div>

            <div class="smallBox">
                @Html.LabelFor(model => model.DOB)
                @Html.EditorFor(model => model.DOB)

            </div>

        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.GivenName1)
                @Html.EditorFor(model => model.GivenName1)

            </div>

        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.FamilyName1)
                @Html.EditorFor(model => model.FamilyName1)
            </div>
            <div class="smallBox">
                @Html.LabelFor(model => model.Ethnicity)
                @Html.EditorFor(model => model.Ethnicity)

            </div>
        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.GivenName2)
                @Html.EditorFor(model => model.GivenName2)

            </div>

        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.FamilyName2)
                @Html.EditorFor(model => model.FamilyName2)
            </div>

        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.Address)
                @Html.EditorFor(model => model.Address)

            </div>

            <div class="smallBox">
                @Html.LabelFor(model => model.CarerContactName)
                @Html.EditorFor(model => model.CarerContactName)

            </div>

        </div>



        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.Community)
                @Html.EditorFor(model => model.Community)

            </div>
            <div class="smallBox">
                @Html.LabelFor(model => model.CarerContact)
                @Html.EditorFor(model => model.CarerContact)

            </div>


        </div>

        <div>
            <div class="addConsumerInfo">
                @Html.LabelFor(model => model.State)
                @Html.EditorFor(model => model.State)

            </div>


        </div>

        <div>
             <div class="addConsumerInfo">
                @Html.LabelFor(model => model.PostCode)
                @Html.EditorFor(model => model.PostCode)
             </div>

        </div>

        <div>
             <div class="addConsumerInfo">
                @Html.LabelFor(model => model.Phone)
                @Html.EditorFor(model => model.Phone)
             </div>
             <div class="smallAddAndCancel">
                <input type="button" id="btnCancel" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Cancel" value="Cancel" onclick="window.close()" />
                <input type="button" id="btnSaveConsumer" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Save" value="Save" />

            </div>
        </div>

    </fieldset>

</div>


<script type="text/javascript">



    $(document).ready(function () {


        $('#btnSaveConsumer').click(function () {

            var hrn;
            var community;
            var ethnicity;
            var familyName;
            var givenName;

            if (hrn) {
                $filter.push({ field: "HRN", operator: "contains", value: hrn });
            }

            if (community) {
                $filter.push({ field: "Community", operator: "contains", value: community });
            }

            if (familyName) {
                $filter.push({ field: "FamilyName", operator: "contains", value: familyName });
            }

            if (givenName) {
                $filter.push({ field: "GivenName", operator: "contains", value: givenName });
            }

            if (ethnicity) {
                $filter.push({ field: "Ethnicity", operator: "contains", value: ethnicity });
            }

            $.ajax({
                type: 'POST',
                url: "@(Url.Content("~/ConsumerDetails/CreateConsumerList/"))",
                data: {
                        "HRN": hrn,
                        "Community":community,
                        "FamilyName1":familyName,
                        "GivenName1":givenName,
                        "Ethnicity":ethnicity,

                },

            });
        });


    });

</script>

控制器：

[HttpPost]
        public ActionResult CreateConsumerList(ConsumerModel model)
        {
            if (ModelState.IsValid)
            {

                HHIMS_DataAccessLayer.Consumers dalModel = new HH.Consumers();
                Mapper.CreateMap<ConsumerModel, HH.Consumers>();
                Mapper.Map(model, dalModel);

                dbConsumer.SaveConsumer(dalModel);

            }
            return RedirectToAction("Index");

        }

Answer 1

通过将所有字段封装在表单中，使其更简单：

@using (Html.BeginForm("action","contoroller")) {
    @Html.EditorFor(model => model.HRN)
}

然后提交表单

var $form = $("#the_id_of_the_form");
// want to validate your form?
// $form.validate();
// if (!$form.valid()) return;
$.ajax({
    type: 'POST',
    url: "@Url.Action("CreateConsumerList","ConsumerDetails")",
    data: $form.serialize(),            
});

或者，如果您不想出于某种原因使用表单：

$.ajax({
        type: 'POST',
        url: "@Url.Action("CreateConsumerList","ConsumerDetails")",
        data: {
            HRN: $("#HRN").val()
            // do the same for the rest of the fields
        }
    });

Answer 2

您不需要JavaScript。您正在通过在.click事件中收集表单字段值并调用$.ajax函数来添加更多工作。我认为这是一个额外的步骤。我建议使用AjaxHelper

@model HHIMS_Web_App.Models.ConsumerModel

    @using(Ajax.BeginForm("CreateConsumerList", "ControllerName",new AjaxOptions {Success:, HttpMethod = "Post" }))
    {
    <div>
       <fieldset id="AddNewConsumer">
// All your form fields here
<div class="smallAddAndCancel">
                <input type="button" id="btnCancel" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Cancel" value="Cancel" onclick="window.close()" />
                <input type="submit" id="btnSaveConsumer" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Save" value="Save" />

            </div>
     </fieldset>

    </div>
    }

我如何将数据从Windows弹出窗口传递给控制器

2 个答案: