Html Helper“Select2”:提交普通表格

时间:2014-01-12 14:47:09

标签: jquery html asp.net-mvc forms jquery-select2

我即将提交普通的html(MVC-Razor)表格。虽然我是MVC的新手而且我不想使用不必要的Ajax,因为我需要时间来学习,而且我很匆忙,而且我的复杂模型包含其他模型我很想知道我应该如何收回数据...

在这种形式中,我正在使用Select2,它来自正常的选择标签...... 我想要的是在对此控件进行任何更改时提交我的表单,并将其值发送回服务器。

问题在于我的一些测试,它有名称但没有价值,有些甚至看起来没有容器名称。

这是我的页面代码:

@model SinglePage.Models.SinglePageIndexViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<h2>خانه</h2>
@using(Html.BeginForm()){
    @Html.ValidationSummary(true)

    @Html.HiddenFor(c=>Model.Customer.Code)

    <script type="text/javascript">
        $(document).ready(function() {
            $("#selectCustomer").select2({
                placeholder: "انتخاب مشتری",
                allowclear: true
            }).select2('val', @((Model != null && Model.Customer != null)? Model.Customer.Code:0))
                .on("select2-selecting", function (e) {
                var form = document.getElementsByTagName('form')[0];
                form.submit();
            });
        });
    </script>


    <fieldset>
        <select id="selectCustomer" name="selectCustomer">
            <option></option>
            @foreach (var customer in Model.CustomerList)
            {
                <option value="@customer.Code">@Html.DisplayFor(c => customer.FirstName) @Html.DisplayFor(c=>customer.LastName)</option>
            }
        </select>

    </fieldset>
}

这是我的帖子请求,其中不包含“selectCustomer”及其值。

Request Incomplete (setlect2)

-Extra帮助(推荐帮助但不是必需的)

另外,如果您有任何建议让我阅读我的数据或命名我的项目,我可以通过模型阅读它们,我会很乐意接受建议,现在我将使用“请求”。形成[]”。

但我的模型结构是这样的:

namespace SinglePage.Models
{
    public class SinglePageIndexViewModel
    {
        public List<Models.Customer> CustomerList { set; get; }
        public List<Models.Item> ItemList { set; get; }
        public Models.Customer Customer { set; get; }
        public Models.Factor Factor { set; get; }
        public List<Models.FactorItem> FactorItemList { set; get; }
    }
}

namespace SinglePage.Models
{
    public class SinglePageIndexViewModel
    {
        public List<Models.Customer> CustomerList { set; get; }
        public List<Models.Item> ItemList { set; get; }
        public Models.Customer Customer { set; get; }
        public Models.Factor Factor { set; get; }
        public List<Models.FactorItem> FactorItemList { set; get; }
    }
}

namespace SinglePage.Models
{
    public class FactorItem
    {
        public int Code { set; get; }
        public int FactorCode { set; get; }
        public string Name { set; get; }
        public int Count { set; get; }
        public decimal ItemPrice { set; get; }

        public decimal TotalPrice
        {
            get
            {
                return ItemPrice*Count;
            }
        }
    }
}

namespace SinglePage.Models
{
    public class Factor
    {
        public int Code { set; get; }
        public int CustomerCode { set; get; }
        public DateTime Date { set; get; }
        public decimal PaidPrice { set; get; }
    }
}

namespace SinglePage.Models
{
    public class Customer
    {
        public int Code { set; get; }
        public string FirstName { set; get; }
        public string LastName { set; get; }
        public string IdentityNo { set; get; }
        public string Telephone { set; get; }
        public string Address { set; get; }
    }
}

我使用包含所有模型的第一个模型传递数据。

谢谢大家, 哈桑先生。

1 个答案:

答案 0 :(得分:2)

您在选择值之前提交表单。选择价值后提交。尝试在change

上提交表单
<script type="text/javascript">
        $(document).ready(function() {
            $("#selectCustomer").select2({
                placeholder: "انتخاب مشتری",
                allowclear: true
            }).select2('val', @((Model != null && Model.Customer != null)? Model.Customer.Code:0))
                .on("change", function (e) {
                var form = document.getElementsByTagName('form')[0];
                form.submit();
            });
        });
    </script>