如何使用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（）控件作为其他答案建议。让我知道是否有任何信息需要。