如何對mvc5中的級聯文本框進行更新操作？

-1

您好我想知道如何在MVC5中級聯文本框中進行更新操作。如何對mvc5中的級聯文本框進行更新操作？

在此我有兩個字段叫做客戶名稱和ContactPerson。這兩個字段是級聯文本框字段。也就是說，如果我鍵入並選擇CustomerName，那麼與CustomerName相關的ContactPerson將自動加載到聯繫人下拉列表中。這是工作正常

現在我想要的是如何在編輯模式下將數據從數據庫傳遞給聯繫人下拉菜單。我在編輯模式下將該值傳遞給CustomerName文本框。它工作正常，但我不能能夠傳遞價值聯繫人下拉

Cascadind文本編碼

我的模型（VisitorsViewModel）

public Nullable<System.Guid> CustomerID { get; set; } 
public string CustomerName { get; set; } 
public Nullable<System.Guid> CustomerContactID { get; set; }

我ViewCode

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" }) 
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control required" }) 
@Html.HiddenFor(model => Model.CustomerID) 


@Html.Label("Contact Person", new { @class = "control-label" }) 
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control required", type = "text", id = "CustomerContactID" })

我的J-查詢代碼

<link href="~/Areas/Sales/Content/themes/base/jquery-ui.css" rel="stylesheet" /> 
    <script src="~/Areas/Sales/Scripts/jquery-2.2.3.min.js"></script> 
    <script src="~/Areas/Sales/Scripts/jquery-ui.1.10.4min.js"></script> 
    <script type="text/javascript"> 

    $('#CustomerName').autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '@Url.Action("GetVisitCustomer", "VisitorsForm")', 
        datatype: "json", 
        data: { 
         Areas: 'Sales', 
         term: request.term 
        }, 
        success: function (data) { 
         response($.map(data, function (val, item) { 
          return { 
           label: val.Name, 
           value: val.Name, 
           customerId: val.ID 
          } 
         })) 
        } 
       }) 
      }, 
      select: function (event, ui) { 
       $("#CustomerID").val(ui.item.customerId); 
       $('#CustomerContactID').empty(); 
       $.ajax(
         '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm", new { Area = "Sales" })', { 
          type: "POST", 
          datatype: "Json", 
          data: { CustomerID: $('#CustomerID').val() }, 
          success: function (data) { 
           $('#CustomerContactID').append($('<option></option>').val('').text('Please select')); 
           $.each(data, function (index, value) { 
           $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>'); 
           }); 
          } 
         }); 
         } 
        });

我的控制器代碼加載客戶名稱和ContactPerson

public JsonResult GetVisitCustomer(string Areas, string term = "") 
    { 
     var objCustomerlist = db.Customers.Where(c => c.IsDeleted == false) 
         .Where(c => c.DisplayName.ToUpper() 
         .Contains(term.ToUpper())) 
         .Select(c => new { Name = c.DisplayName, ID = c.CustomerID }) 
         .Distinct().ToList(); 
     return Json(objCustomerlist, JsonRequestBehavior.AllowGet); 
    } 

public JsonResult GetContactPersobByCustomerId(string customerId) 
    { 
      Guid Id = Guid.Parse(customerId); 
     var customercontacts = (from a in db.CustomerContacts where a.CustomerID == Id select a); 
      return Json(customercontacts, JsonRequestBehavior.AllowGet); 
    }

編輯代碼

控制器代碼

public ActionResult Edit(Guid? id) 
{ 
    WafeERP_NEWEntities db = new WafeERP_NEWEntities(); 
    VisitorsViewModel objvisitorsviewmodel = new VisitorsViewModel(); 
    View_VisitorsForm objviewvisitorsForm = db.View_VisitorsForm.Find(id); 

     ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "DisplayName", objviewvisitorsForm.EmployeeID); 
     ViewBag.POVisitID = new SelectList(db.POVisits, "POVisitID", "POVisit1", objviewvisitorsForm.POVisitID); 
     ViewBag.ItemID = new SelectList(db.Items, "ItemID", "DisplayName", objviewvisitorsForm.ItemID); 


    objvisitorsviewmodel.VisitingID = objviewvisitorsForm.VisitingID; 
    objvisitorsviewmodel.Date = objviewvisitorsForm.VisitingDate; 
    objvisitorsviewmodel.CustomerID = objviewvisitorsForm.CustomerID; 
    objvisitorsviewmodel.CustomerName = objviewvisitorsForm.CustomerName; 
    return View(objvisitorsviewmodel); 
    }

這裏我通過了客戶名稱值到客戶名稱字段在編輯模式。但我無法將編輯模式下的CustomerName相關ContactPerson傳遞給ContactPersom下拉菜單。我試圖解釋我的問題。請任何人幫我解決這個問題。

高級謝謝。

來源

2016-06-28 Susan

首先更改您的視圖模型，使其包含與CustomerContactID關聯的CustomerContact對象的屬性以用於您的下拉列表。

public class VisitorsViewModel 
{ 
    .... 
    [Required(ErrorMessage = "Please select a customer contact")] 
    [Display(Name = "Contact Person")] 
    public Nullable<System.Guid> CustomerContactID { get; set; } 
    public IEnumerable<SelectListItem> CustomerContactList { get; set; } // add this 
    .... // add other SelectLists rather than using ViewBag 
}

注意你也應該爲員工，POVisits和項目添加類似IEnumerable<SelectListItem>性質，以避免使用ViewBag。

下一頁修改GET方法來填充選項CustomerContactID

public ActionResult Edit(Guid? id) 
{ 
    WafeERP_NEWEntities db = new WafeERP_NEWEntities(); 
    View_VisitorsForm model = db.View_VisitorsForm.Find(id); 

    VisitorsViewModel viewModel = new VisitorsViewModel() 
    { 
     VisitingID = model.VisitingID, 
     .... 
     // Add the following 
     CustomerContactID = model.CustomerContactID, 
     CustomerContactList = db.CustomerContacts.Where(x => x.CustomerID == model.CustomerContactID).Select(x => new SelectListItem() 
     { 
      Value = CustomerContactID, 
      Text = ContactReference 
     }, 
     .... // add the other select lists 
    }; 
    return View(viewModel); 
}

然後在視圖中，使用

@Html.LabelFor(m => m.CustomerContactID", new { @class = "control-label" }) 
@Html.DropDownListFor(m => m.CustomerContactID, Model.CustomerContactList, "Please select a ContactPerson", new { @class = "form-control }) 
@Html.ValidationMessageFor(m => m.CustomerContactID)

請注意，您不需要的屬性爲id和type - 他們是已通過DropDownListFor()方法添加，並且您不應該有一個required屬性，它是HTML5驗證。相反，請添加一個[Required]屬性並使用ValidationMessageFor()，以便獲得服務器和客戶端驗證。

邊注：如果這是一個創建視圖，那麼你會使用

CustomerContactList = Enumerable.Empty<SelectListItem>()

，讓您最初顯示一個空的下拉列表指定CustomerContactList選項。

來源

2016-06-30 07:50:31

如何對mvc5中的級聯文本框進行更新操作？

回答

相關問題