使用Ajax

时间:2017-03-10 08:00:52

标签: javascript c# ajax asp.net-mvc partial-views

我是javascript的新手,也是OOP的初级开发者。

经过多次尝试和许多谷歌搜索,我决定不解决它。

我有一个DropDownList和一个部分视图。我想将选定的值提供给局部视图控制器。它直接写入值时有效,但如果我尝试捕获DropDownList值则不会。目前返回的值始终为空。

模型

public partial class Clients
{
    public int ClientID { get; set; }
    public string Code { get; set; }
    public string Nom { get; set; }
    public string Adresse1 { get; set; }
    public string Adresse2 { get; set; }
    public string CP { get; set; }
    public string Ville { get; set; }
    public Nullable<System.DateTime> DateCreation { get; set; }
    public Nullable<System.DateTime> DateModification { get; set; }
}

查看

@Html.DropDownList("id", (IEnumerable<SelectListItem>)ViewData["oas"], new { @id = "ClientID" })

<div id="result"></div>
<script>
    $(function () {
        $('#ClientID').change(function () {
            //var pid = $("#id").val();//$(this).data('id');
            $('#result').load('@Url.Action("filter")',
                { id: $("#id").val() } //replacing $("#id").val() by "3" makes it work, but i of course don't a constant value here 
            );
        });
    });

控制器

public class OnePageController : Controller
{
    Entities db = new Entities();

    public ActionResult Index()
    {
        List<SelectListItem> list = new List<SelectListItem>();
        list.Add(new SelectListItem { Text = "-Please select-", Value = "Selects items" });
        var clts = (
            from c in db.Clients
            select c).ToArray();
        for (int i = 0; i < clts.Length; i++)
        {
            list.Add(new SelectListItem
            {
                Text = clts[i].Nom,
                Value = clts[i].ClientID.ToString(),
                Selected = (clts[i].ClientID == 1)
            });
        }
        ViewData["oas"] = list;
        return View(/*db.Clients.ToList()*/);
    }

    [HttpPost]
    public ActionResult Filter(string id)
    {
        var contact = from c in db.Contacts
                      where c.ClientID.ToString() == id
                      select c;
        return PartialView(contact);
    }
}

任何想法都会受到高度赞赏,我也不知道如何调试javasript,我在浏览器中使用开发工具来尝试捕获值,但我并没有真正跟踪这些变化..

1 个答案:

答案 0 :(得分:0)

你应该改变你的脚本:

$(function () {
    // You select the element with id = ClientID
    var clientEle = $('#ClientID');

    // You register an event handler for the change of the selected value
    clientEle.change(function () {

        // clientEle.val() would return the selected value
        $('#result').load('@Url.Action("filter")',{ id: clientEle.val() });
    });
});

关于如何调试JavaScript,我建议您在开始调试之前先写几行代码:

debugger;

然后打开开发人员工具并刷新页面。当JavaScript引擎点击调试器时会停止它的执行,从这一刻起你可以逐行检查你的代码。

要全面了解如何调试JavaScript,可以先查看以下链接