asp.net-mvc-3 - 在 MVC3 页面 EF4 上使用 AJAX 部分回发带有下拉列表的页面

Question

我有一个下拉列表，其中列出了国家/地区名称 当用户从下拉列表中选择任何国家/地区时。根据国家/地区选择，我需要从数据库加载数据(AgencyName、AgencyAddr、Pincode)并填充右侧的文本框。下拉列表中选定的国家/地区应保持选中状态。

关于下拉列表的选择更改，我不希望回发整个页面。请帮助我

这是我的 EF4 - 模型类

public class Country
{
    public int CountryID { get; set; }
    public string CountryName { get; set; }

}

public class AgencyInfo
{
    public int CountryID { get; set; }
    public string AgencyName { get; set; }
    public string AgencyAddr { get; set; }
    public int Pincode { get; set; }

}

这是我的 MVC4 razor 页面 Index.cshtml

        @using (Ajax.BeginForm(
"Index",
"Home",
new AjaxOptions { UpdateTargetId = "result" }
))
{
@Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one event)")
}

<div id=’result’>
<fieldset>
    <legend>Country Details: </legend>
    <div> 
        <table>
            <tr>
                <td>
                    <span>Country Name </span>
                    <br />
                       @Html.EditorFor(model => model.Countries.Name)
            @Html.ValidationMessageFor(model => model. Countries.Name)
                </td>
                <td>
                    <span>Agency Name </span>
                    <br />
                    @Html.EditorFor(model => model.AgencyInfo.AgencyName)
                    @Html.ValidationMessageFor(model => model.AgencyInfo.AgencyName)
                </td>
            </tr>
            <tr>
                <td>
                    <span>Address Info </span>
                    <br />
                     @Html.EditorFor(model => model. AgencyInfo.Address)
                    @Html.ValidationMessageFor(model => model. AgencyInfo.Address)
                </td>
                <td>
                    <span>Pin Code </span>
                    <br />
                      @Html.EditorFor(model => model. AgencyInfo.PinCode)
                    @Html.ValidationMessageFor(model => model. AgencyInfo.PinCode)
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="Modify" /><input type="submit" value="Delete" />
                </td>
                <td>
                    <input type="submit" value="Save" /><input type="submit" value="View Resources" />
                </td>
            </tr>
        </table>
    </div>
</fieldset>
</div >  @end of result div@

有什么建议吗？谢谢您

Answer 1

您想使用ajax。

添加事件处理程序以监视选择更改。当下拉列表更改时，获取当前国家/地区并发送 ajax 请求。当 ajax 请求返回时，使用 jQuery 更新 DOM。

示例 View :

<p id="output"></p>

<select id="dropDown"><option>Option 1</option>
<option>Option 2</option></select>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#dropDown").change(function () {
            var selection = $("#dropDown").val();
            var dataToSend = {
                country: selection
            };

            $.ajax({
                url: "home/getInfo",
                data: dataToSend,
                success: function (data) {
                    $("#output").text("server returned:" + data.agent);
                }
            });
        });
    });
</script>

Controller 方法示例:

public class HomeController : Controller
{
    [HttpGet]
    public JsonResult GetInfo(string country)
    {
        return Json(new { agent = country, other = "Blech" }, JsonRequestBehavior.AllowGet);
    }
}

其他一些例子:

添加 Controller 方法来处理ajax请求: http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

调用ajax并更新DOM: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2