如何使用MVC在下拉選擇文本框中顯示數據

Question

我非常新的MVC。我試圖在文本框中顯示數據選擇下拉列表中的值。

代碼爲「創建視圖」：

@model CRUD_using_LinQ_to_SQL_in_MVC.Models.OtdModelClass 
@{ 
ViewBag.Title = "Create";} 

@using (Html.BeginForm()) { 
@Html.ValidationSummary(true) 
<fieldset> 
    <legend>Create</legend> 

    <div class="editor-label" style="font-weight: bold"> 
     Server Type: 
    <//div> 
    <div> 
    <select name="Server Type" id="ServerType"> 
     <option>Select</option> 
     <option value="1">Internet</option> 
     <option value="2">Lease</option> 
    </select> 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.MemberCode) 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.MemberCode, new { maxlength="6"}) 
     @Html.ValidationMessageFor(model => model.MemberCode) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.LoginID) 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.LoginID, new { maxlength = "6" }) 
     @Html.ValidationMessageFor(model => model.LoginID) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.OTDPassword) 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.OTDPassword, new { maxlength = "7" }) 
     @Html.ValidationMessageFor(model => model.OTDPassword) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.BBSID) 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.BBSID, new { maxlength = "6" }) 
     @Html.ValidationMessageFor(model => model.BBSID) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.IPAddress) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.IPAddress) 
     @Html.ValidationMessageFor(model => model.IPAddress) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.ServerType) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.ServerType) 
     @Html.ValidationMessageFor(model => model.ServerType) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.OTDStatus) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.OTDStatus) 
     @Html.ValidationMessageFor(model => model.OTDStatus) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.RemoteIP) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.RemoteIP) 
     @Html.ValidationMessageFor(model => model.RemoteIP) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.RemotePort) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.RemotePort) 
     @Html.ValidationMessageFor(model => model.RemotePort) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.AllowDownload) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.AllowDownload) 
     @Html.ValidationMessageFor(model => model.AllowDownload) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.OTDTimeStamp) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.OTDTimeStamp) 
     @Html.ValidationMessageFor(model => model.OTDTimeStamp) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.MemberType) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.MemberType) 
     @Html.ValidationMessageFor(model => model.MemberType) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.EQ) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.EQ) 
     @Html.ValidationMessageFor(model => model.EQ) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.EQD) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.EQD) 
     @Html.ValidationMessageFor(model => model.EQD) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.BFX) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.BFX) 
     @Html.ValidationMessageFor(model => model.BFX) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.SLB) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.SLB) 
     @Html.ValidationMessageFor(model => model.SLB) 
    </div> 
    <div class="editor-label" style="font-weight: bold"> 
     @Html.LabelFor(model => model.Others) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Others) 
     @Html.ValidationMessageFor(model => model.Others) 
    </div> 
    <p> 
     <input type="submit" value="Create" /> 
    </p> 
</fieldset>}<div> @Html.ActionLink("Back to List", "Index")</div> 

這裏當服務器類型，那麼「遠程IP」和「遠程端口」字段的用戶選擇選項「互聯網」應該得到自動填充與各自的價值。 我在互聯網上搜索了很多，但我沒有得到適當的解決方案。 你能幫我嗎？ 在此先感謝...

Answer 1

這是因爲您正在使用HTML編碼自己的下拉菜單。你應該使用的是MVC中的DropDownListFor方法。

This answer可以爲您提供一個示例。

Answer 2

請嘗試以下操作
1.爲您提到的下拉菜單創建一個jQuery onchange事件。
2.獲取選定的值。
3.使用Json返回類型和輸入參數作爲名爲ServerType的字符串創建一個新的操作方法。然後查詢數據庫以獲取基於服務器類型的RemoteIp和Remoteport值。
4.在jquery onchange事件中，對步驟3中創建的操作方法執行ajax調用。
5.將json數據設置爲「{」ServerType「：」Your selected dropdown value「}。
6. In ajax成功的方法分配文本框與成功方法結果中的各自的數據。

希望你知道更好地使用jquery使用ajax調用您可以使用Html.Dropdownfor（）控件作爲其他答案建議。讓我知道是否有任何信息需要。