Question

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

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

这是我的EF4 - ModelClasses

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

示例视图：

<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

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

1 个答案: