Question

我是ASP .Net MVC 2的新手。

我的网站显示一个包含2个下拉列表的表单，然后显示2个文本框。以下是视图

当用户更改任一下拉列表的选择时，程序将在数据库中自动检查（使用下拉列表中的选定值），以获取2个文本框的文本。

我该怎么做？我猜我需要一些java脚本（Ajax？）。我从来没有做过这样的事情，所以任何关于网络教程的链接或我可以用来搜索Google的关键字都将非常感谢！

亲切的问候

鲍勃

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RM.Advertising.ViewModels.AdvertViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
    Index</h2>
<% using (Html.BeginForm())
   {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
    <legend>Fields</legend>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PageId) %>
    </div>
    <div class="editor-field">
        <%= Html.DropDownListFor(model => model.PageId, (IEnumerable<SelectListItem>)ViewData["PageNameList"])%>
        <%= Html.ValidationMessageFor(model => model.PageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-field">
        <%: Html.DropDownListFor(model => model.PositionOnPageId, (IEnumerable<SelectListItem>)ViewData["PositionList"])%>
        <%: Html.ValidationMessageFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Name) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Name) %>
        <%: Html.ValidationMessageFor(model => model.Name) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Url) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Url) %>
        <%: Html.ValidationMessageFor(model => model.Url) %>
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
<% } %>
<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>

Answer 1

经过一天的阅读......

在www.w3schools.com上，教程有所帮助 - JavaScript - HTML DOM - JQuery - Ajax（不是全部）

以下是控制器和视图示例。控制器Index方法使用空的ViewModel调用视图，但是应该使用数据库中的某些值填充它。

当用户更改第一个下拉列表时，视图会调用控制器的GetData（请参阅使用jQuery.ajax的脚本部分）。类似于第二次下拉。 javascript使用jquery来收集表单上的值并将它们传递给GetData。

GetData返回一个新的ViewModel。该示例使用虚拟数据。该方法应该从db。

获取值

我需要关闭AdBlock以使代码生效。

此致

鲍勃

这是控制器

/// <summary>
/// Controller to change adverts
/// </summary>
[Authorize]
public class AdvertController : Controller
{
    /// <summary>
    /// Default controller action.
    /// </summary>
    /// <returns></returns>
    public ActionResult Index()
    {
        ViewData["PageNameList"] = service.GetPageNameList();
        ViewData["PositionList"] = service.GetPositionList();

        return View(new AdvertViewModel());
    }

    [HttpPost]
    public ActionResult GetData(AdvertViewModel data)//FormCollection data)//int id)
    {
        AdvertViewModel result = new AdvertViewModel() { Name = "got data" };
        return Json(result);
    }

这是视图

＆lt;％@ Page Title =“”Language =“C＃”MasterPageFile =“〜/ Views / Shared / Site.Master”Inherits =“System.Web.Mvc.ViewPage”％＆gt;

指数 $（document）.ready（function（）{ $（“＃PageId”）。change（function（）{

            //$("#Name").val("something");

            var name = $("#Name").val();
            var url = $("#Url").val();
            var pageId = $("#PageId").val();
            var poisitionInPageId = $("#PositionOnPageId").val();

            jQuery.ajax({
                url: "/Advert/GetData",
                async: false,
                type: "POST",
                data: ({Name: name, Url: url, PageId: pageId, PositionOnPageId: poisitionInPageId}),
                dataType: "json",
                success: function (data) {
                    jQuery("#Name").val(data.Name);
                }
            });
        });
    });
</script>
<h2>
    Index</h2>
<% using (Html.BeginForm())
   {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
    <legend>Fields</legend>
    <div>
        <input type="text" id="textbox" />
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PageId) %>
    </div>
    <div class="editor-field">
        <%= Html.DropDownListFor(model => model.PageId, (IEnumerable<SelectListItem>)ViewData["PageNameList"])%>
        <%= Html.ValidationMessageFor(model => model.PageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-field">
        <%: Html.DropDownListFor(model => model.PositionOnPageId, (IEnumerable<SelectListItem>)ViewData["PositionList"])%>
        <%: Html.ValidationMessageFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Name) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Name)%>
        <%: Html.ValidationMessageFor(model => model.Name) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Url) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Url) %>
        <%: Html.ValidationMessageFor(model => model.Url) %>
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
<% } %>
<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>

如何根据下拉列表自动更改文本框的内容？

1 个答案: