在MVC3页面EF4上使用AJAX部分回发带有下拉列表的页面

Question

我有一个下拉列表，列出了国家名称当用户从下拉列表中选择任何国家时。根据国家选择，我需要从数据库加载数据（AgentName、AgentAddr、Pincode），并填写右侧的TextBox。下拉列表中所选的国家/地区应保持选中状态。

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

这是我的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剃须刀页面Index.chtml

        @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。

示例视图：

<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>

控制器方法示例：

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

其他一些例子：

添加一个控制器方法来处理ajax请求：http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

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