如何将值从视图提交到控制器

时间:2017-01-18 08:29:56

标签: asp.net-mvc-4 visual-studio-2012

我有一个局部视图的视图。在我的主视图中有一个下拉列表,在从下拉列表中选择值时,将根据所选的选项填充WebGrid。 同样在主视图中,我有一个下拉列表,一个日期时间选择器文本框和一个提交(分配)按钮。 Webgrid每行都有一个复选框。从WebGrid中选择一行时,收集的数据需要转到控制器。但我的按钮不起作用!

请帮我控制器,我无法在控制器中获取所选值。 我的观点如下:

            @model LipiProject.Models.Allocation

        @{
            ViewBag.Title = "Call Allocation";
        }
        <script src="~/Scripts/jquery-1.8.2.min.js"></script>  
        <script src="~/Scripts/jquery.validate.min.js"></script>  
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>  
        <link href="~/StyleSheet1.css" rel="stylesheet" />   
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="~/Scripts/Timepicker.js"></script>
        <script>
            $(function () {
                $("#datepicker").datetimepicker({ timeFormat: "hh:mm tt" });
            });</script>

        <style>
            .webgrid-table {  
                    font-family: Arial,Helvetica,sans-serif;  
                    font-size: 14px;  
                    font-weight: normal;  
                    width: 650px;  
                    display: table;  
                    border-collapse: collapse;  
                    border: solid 1px #C5C5C5;  
                    background-color: white;  
                }  
                .webgrid-table td, th {  
                    border: 1px solid #C5C5C5;  
                    padding: 3px 7px 2px;  
                }  
                .webgrid-header, .webgrid-header a {  
                    background-color: #0094ff;  
                    color:#ffffff;  
                    text-align: left;  
                    text-decoration: none;  
                }  
                .webgrid-footer {  
                }  
                .webgrid-row-style {  
                    padding: 3px 7px 2px;  
                }  
                .webgrid-alternating-row {  
                    background-color:azure;  
                    padding: 3px 7px 2px;  
                }  
                .col1Width {  
                    width: 55px;  
                }  
                .col2Width {  
                    width: 220px;  
                }  

             .lineSep {
           border-bottom: 1px solid #000;
            display: block;
            margin: 10px 0;

        }

        </style>

        <h2>Index</h2>
        <div id="overlay" style="display: none">
            <img id="loading" src="~/Images/ajax-loader.gif">
        </div>

        @using (Html.BeginForm("CallAllocationSubmit", "Home", FormMethod.Post, new { id = "FrmCallAllocate", ReturnUrl = ViewBag.ReturnUrl }))
        {
        <table>
            <tr>
                <td>
                    <div class="row">
                      <div class="col-sm-12">
                            <section class="panel default blue_title h5">
                                    <div class="panel-heading">Select Call Category</div>
                                          <div class="panel-body">
                                               @Html.DropDownList("CallNature", Model.CallNature, "Select Call Nature")
                                          </div>
                            </section>
                        </div>
                     </div>
               </td>
            </tr>
            <tr>
                <td>
                    <div id="GridView">
                       @Html.Partial("_CallAllocation",Model.CallTicketGrid)
                    </div>   
                </td>
            </tr>
        </table>

        <div class="row">
                      <div class="col-sm-12">
                            <section class="panel default blue_title h5">
                                    <div class="panel-heading">Allocate Engineer</div>
                                        <div class="panel-body">
                                             @Html.DropDownList("DefaultEngg", Model.DefaultEngg, "Select Engineer")
                                            &nbsp;&nbsp;&nbsp;ETA: <input type="text" id="datepicker">
                                            &nbsp;&nbsp;&nbsp;<input type="submit" value="Allocate" class="btn btn-primary">

                                        </div>
                            </section>
                        </div>
        </div>
        }

        <script type="text/javascript">
            $('#CallNature').change(function (e) {
                e.preventDefault();
                var url = '@Url.Action("Filter")';
                $.get(url, { CallNatureId: $(this).val() }, function (result) {
                    debugger;
                    $('#GridView').html(result);
                });
            });


        </script>

我的部分视图如下:

    @model List<LipiProject.Models.Allocation>

    @{
        ViewBag.Title = "_CallAllocation";
    }


    <style>
        .webgrid-table {  
                font-family: Arial,Helvetica,sans-serif;  
                font-size: 14px;  
                font-weight: normal;  
                width: auto;  
                display: table;  
                border-collapse: collapse;  
                border: solid 1px #C5C5C5;  
                background-color: white;  
            }  
            .webgrid-table td, th {  
                border: 1px solid #C5C5C5;  
                padding: 3px 7px 2px;  
            }  
            .webgrid-header, .webgrid-header a {  
                background-color: #0094ff;  
                color:#ffffff;  
                text-align: left;  
                text-decoration: none;  
            }  
            .webgrid-footer {  
            }  
            .webgrid-row-style {  
                padding: 3px 7px 2px;  
            }  
            .webgrid-alternating-row {  
                background-color:azure;  
                padding: 3px 7px 2px;  
            }  
            .col1Width {  
                width: 55px;  
            }  
            .col2Width {  
                width: 220px;  
            }  

         .lineSep {
       border-bottom: 1px solid #000;
        display: block;
        margin: 10px 0;

    }

    </style>

    @{ var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent", columnNames: new[] { "CallTicketNumber", "TicketDate", "SerialNumber", "CustomerName", "City", "State", "DefaultEngg" }, defaultSort: "DateCreated");

    <div class="row" id="GridView">
                 <div class="col-sm-12">
                        <section class="panel default blue_title h5">
                                <div class="panel-heading">Allocate Calls</div>
                                    <div class="panel-body">
                                      <div class="col-sm-12">@grid.GetHtml(mode:WebGridPagerModes.All,
                                                                            tableStyle: "webgrid-table",
                                                                            htmlAttributes: new {id = "checkableGrid"},
                                                                            headerStyle: "webgrid-header",  
                                                                            footerStyle: "webgrid-footer",  
                                                                            alternatingRowStyle: "webgrid-alternating-row",  
                                                                            selectedRowStyle: "webgrid-selected-row",  
                                                                            rowStyle: "webgrid-row-style",
                                                                            columns: grid.Columns(  
                                                                            grid.Column(columnName: "CallTicketNumber", header: "CallTicketNumber"),
                                        grid.Column(columnName: "TicketDate", header: "Ticket Logged On"),
                                        grid.Column(columnName: "SerialNumber", header: "Serial Number"),
                                        grid.Column(columnName: "CustomerName", header: "Customer Name"),
                                        grid.Column(columnName: "City", header: "City"),
                                        grid.Column(columnName: "State", header: "State"),
                                        //grid.Column("DefaultEngg", "Engineer", format:item => Html.DropDownList(((string)item.DefaultEngg).ToString(), (List<SelectListItem>)Model[0].DefaultEngg))
                                        //grid.Column(header:"Default Engineer", format: item =>Html.DropDownList(((long)item.CallTicketNumber).ToString(), (IEnumerable<SelectListItem>)Model[0].DefaultEngg))
                                        grid.Column(format: @<text> <input type="checkbox" value="@item.CallTicketNumber" name="ids" /> </text>,
                                        header: "SelectAll")
                                        ))  </div>

                                    </div>
                        </section>

                </div>
    </div>
    }


    <script>
        $(document).ready(function () {

            // 1st replace first column header text with checkbox

            $("#checkableGrid th").each(function () {
                if ($.trim($(this).text().toString().toLowerCase()) === "SelectAll") {
                    $(this).text('');
                    $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                    $(this).append("<span>Select All</span>");
                }
            });

            //2nd click event for header checkbox for select /deselect all
            $("#cbSelectAll").live("click", function () {
                var ischecked = this.checked;
                $('#checkableGrid').find("input:checkbox").each(function () {
                    this.checked = ischecked;
                });
            });


            //3rd click event for checkbox of each row
            $("input[name='ids']").click(function () {
                var totalRows = $("#checkableGrid td :checkbox").length;
                var checked = $("#checkableGrid td :checkbox:checked").length;

                if (checked == totalRows) {
                    $("#checkableGrid").find("input:checkbox").each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $("#cbSelectAll").removeAttr("checked");
                }
            });

        });
    </script>

我的控制器就像:

     [HttpPost]

    [ValidateAntiForgeryToken]
    public ActionResult CallAllocationSubmit(Allocation allocate, FormCollection frmCollection)
    {

            string CallTicketNumber = frmCollection["CallTicketNumber"].ToString();
            string CallNature = frmCollection["CallNature"].ToString();
            var Defengg = frmCollection["DefaultEngg"].ToList();
            var ETA = frmCollection["ETA"].ToString();
      return RedirectToAction("CallAllocation");
      }

0 个答案:

没有答案