MVC Html Dropdown使用razor更改表的内容

时间:2013-11-27 00:22:03

标签: asp.net-mvc razor onchange html-select asp.net-mvc-partialview

嗨,有没有人可以帮我解决以下问题。 在更改(PartialView)下拉列表

中的值时,我会非常简单地更改表的内容

控制器

public ActionResult Index(int id = 0)
    {
       var testlines = db.testlines.Include(t => t.Test)
        .Where(t => t.TestId == id)
        .Select(t => new TestLineList { 
        Id = t.id,
        TestId = id,
        TextBefore = t.TextBefore,
        TextAfter = t.TextAfter,
        TestName = t.Test.Name,
        Answer = t.Answer,
        AudioPath = t.AudioPath
        });

           var items = db.tests.ToList().Select(i => new SelectListItem() { Value = i.Id.ToString() , Text = i.Name });
           List<SelectListItem> testlist = new List<SelectListItem>();
           testlist.AddRange(items);

           testlist.Insert(0, new SelectListItem() { Value = "0", Text = "-- Vælg Test --" });
           SelectList sl = new SelectList(testlist, "Value", "Text", id);
       ViewBag.TestId = sl;

       if (Request.IsAjaxRequest())
       {
           return PartialView("PartialTestlines", testlines);
       }

       return View(testlines.ToList());
    }
    [HttpPost]
    public ActionResult PartialTestlines(int? id)
    {
        if (!id.HasValue) { id = 0; }
        var testlines = db.testlines.Include(t => t.Test)
         .Where(t => t.TestId == id)
         .Select(t => new TestLineList
         {
             Id = t.id,
             TestId = id.HasValue ? (int)0:(int)id,
             TextBefore = t.TextBefore,
             TextAfter = t.TextAfter,
             TestName = t.Test.Name,
             Answer = t.Answer,
             AudioPath = t.AudioPath
         });

        var items = db.tests.ToList().Select(i => new SelectListItem() { Value = i.Id.ToString(), Text = i.Name });
        List<SelectListItem> testItems = new List<SelectListItem>();
        testItems.AddRange(items);


        testItems.Insert(0, new SelectListItem() { Value = "0", Text = "-- Vælg Test --" });
        SelectList sl = new SelectList(testItems, "Value", "Text", id);
        ViewBag.TestId = sl;

        if(Request.IsAjaxRequest()) 
        {
            //return this.Json(testlines, JsonRequestBehavior.AllowGet);
            return PartialView("PartialTestlines",testlines);
        }
        return View(testlines.ToList());

    }`enter code here`

查看

@model IEnumerable<Spelling.Models.TestLineList>

 <p>
@using(Ajax.BeginForm("PartialTestlines", "TestLine", new AjaxOptions { UpdateTargetId = "highlight" }))
{  

 @Html.DropDownList("Testdrop", (SelectList)ViewBag.TestId,((SelectList)ViewBag.TestId).SelectedValue)            
}      
</p>
 <p>
 @Html.Partial("PartialTestlines", Model)
 </p>

脚本

    $(document).ready(function () {
    ("#Testdrop").change(function () {
        $(this).parent("form").submit()
    });
});

onchange funktion不会发出ajax请求,也无法从下拉列表中获取值并将其用作参数ID。

我发现我可以通过调用此脚本来执行ActionResult,但是表的内容没有被替换,并且您在脚本上遇到了错误。有什么想法吗?

jQuery(document).ready(function () {
$("#Testdrop").change(function () {
    var tempid = $("#Testdrop").val();
    $.ajax({
        url: "/TestLine/PartialTestlines",
        type : "post",
        data: {"id" : tempid } ,// Send value of the drop down change of option
        dataType: "json", // Choosing a JSON datatype
        success: function (data) {

            // Variable data contains the data you get from the action method
        },
        error: function (e) { alert(e.error);}
    });
});

});

这将有效。为什么我不能用下拉菜单做同样的事情?

@using(Ajax.BeginForm("Index", "TestLine", new AjaxOptions { UpdateTargetId = "highlight" }))
{  

// @Html.DropDownList("Testdrop", (SelectList)ViewBag.TestId,((SelectList)iewBag.TestId).SelectedValue)         

     <input type="search" name="id" />
<input type="submit" value="id" />   
}      

0 个答案:

没有答案