页面的局部回传与DropDownList中的MVC3页EF4使用AJAX [英] Partial postback of page with dropdownlist using AJAX on MVC3 page EF4

问题描述

我有一个DropDownList列出国名
当用户选择任何一个国家在下拉菜单上选择国家list.Based，我需要的数据（AgencyName，AgencyAddr，引脚code）从数据库加载并填补在下拉列表中选择国家的权利一面。在TextBoxs应保持选中状态。

I have a dropdownlist which lists Country names When user select any country from dropdown list.Based on the country selection, I need data(AgencyName, AgencyAddr,Pincode) to be loaded from database and fill the TextBoxs on the right side.The selected country in the dropdown should remain selected.

在DropDownList的选择变化，我不希望整个页面回发。请帮我

on selection change of dropdownlist ,I do not want the entire page to postback .Please help me

下面是我的EF4 - ModelClasses

Here is my 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

Here is my MVC4 razor page 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@

有什么建议？谢谢

Any suggestions ? Thank you

推荐答案

您想使用AJAX。

添加事件处理程序来监视选择更改。当下拉的变化，得到当前国家和发送Ajax请求。当Ajax请求返回更新与jQuery的DOM。

Add an event handler to monitor the selection change. When the drop down changes, get the current country and send the ajax request. When the ajax request returns update the DOM with jQuery.

例视图：

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

例如控制器的方法：

Example controller method:

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

其他的一些例子：

Some other examples:

添加控制器的方法来处理Ajax请求：
HTTP：//www.clean$c$c .co.nz /博客/ 739 / AJAX-ASPNET-MVC-3

adding a controller method to handle ajax request: http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

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

calling ajax and updating DOM: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2

这篇关于页面的局部回传与DropDownList中的MVC3页EF4使用AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！