更新下拉列表值

时间:2010-07-08 04:07:55

标签: jquery asp.net-mvc asp.net-mvc-2 drop-down-menu

在ViewModel中:

SelectSafetyContacts = new SelectList(subcontractRepository.GetContacts(Subcontract.company_id), "contact_id", "contact_name", Subcontract.safety_contact);

在存储库中:

public IQueryable<contact> GetContacts(Guid id)
    {
        return
        db.companies
            .Where(c => c.active_status == true)
            .Where(c => c.primary_company == id || c.company_id == id)
            .SelectMany(ct => ct.contacts).Where(ct => ct.active_status == true);
    }

表格形式:

<%= Html.DropDownList("safety_contact", Model.SelectSafetyContacts, "** Select Contact **") %>

这很有效,除非他们改变公司的形式。然后需要更改联系人以匹配新公司。我假设我可以用jQuery以某种方式做到这一点,但我不确定如何。我可以在存储库中引用GetContacts函数,以便将来如果对此选择进行更新,它只会在一个地方吗?

2 个答案:

答案 0 :(得分:0)

您可以使用AJAX实现此目的。当公司更改时,向服务器发送请求,传递新的公司ID以获取关联的联系人。为此,您需要一个控制器操作,返回包含联系人下拉列表的部分视图:

型号:

public class SafetyContactsViewModel
{
    public int? SelectedContactId { get; set; }
    public IEnumerable<SelectListItem> Contacts { get; set; }
}

控制器:

public ActionResult Contacts(int? companyId)
{
    var contacts = new SafetyContactsViewModel
    {
        Contacts = new SelectList(
            subcontractRepository.GetContacts(companyId), 
            "contact_id", 
            "contact_name"
        )
    };
    return PartialView(contacts);
}

然后您的Contacts.ascx部分将包含下拉列表:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SafetyContactsViewModel>" %>
<%= Html.DropDownListFor(x => x.SelectedContactId, Model.Contacts, "** Select Contact **") %>

然后你可以将.change()事件处理程序附加到公司下拉列表中,这将调用控制器操作:

$(function() {
    $('#the_id_of_the_companies_drop_down').change(function() {
        $('#id_of_a_div_that_contains_the_contacts_drop_down')
            .load('/home/contacts', { companyId: $(this).val() });
    });
});

答案 1 :(得分:0)

这样做了:

$('#company').change(function () {
            var company = $(this)[0].value.toString();
            $.getJSON('<%= ResolveUrl("~/Subcontracts/CompanyContacts/") %>' + company, null, function (data) {
                $('.contact').empty().append("<option value=''>**Select Contact**</option>");
                $.each(data, function (index, optionData) {
                    $('.contact').append("<option value='" + optionData.contact_id + "'>" + optionData.contact_name + "</option>");

                });
            });
        });

在我的控制器中:

public ActionResult CompanyContacts(string id)
    {
        Guid companyId = new Guid(id);
        IEnumerable<contact> companycontacts = subcontractRepository.GetContacts(companyId);
        var contacts = (from c in companycontacts select new { contact_id = c.contact_id, contact_name = c.contact_name });

        return Json(contacts, JsonRequestBehavior.AllowGet);
    }