将数据从MVC控制器发布到使用ajax jquery进行查看

时间:2014-06-30 10:06:50

标签: javascript jquery ajax asp.net-mvc

我有一个由下拉列表和一些标签组成的视图。 根据从下拉列表中选择的值,需要在标签上填充相关数据。

我已经使用ajax jquery根据下拉列表选择发布到服务器但由于我的httppost操作方法已经返回正确的数据但是没有捕获到数据,因此无法获取数据。

下拉javascript代码

   $(function () {

       $("#Year").change(function () {
           var Year = $('#Year').val();
           // var str = $(this).val();
           if (Year != "" || Year != "--Select--") {
               //alert("hi");
               $.ajax({

                   type: "POST",
                   url: '@Url.Action("Index", "TeamProbReview")',
                    data: { empcode: Year },
                    dataType: "json",
                    success:function(msg){ } }); 

                //function successFunc(data, status) { $('#txtTradeQty').val(data); } //alert("success" + data + $('#txtTradeQty').val()); 
                //function errorFunc() { alert('error'); } successFunc,  alert(data); 
            }
            else { alert("Pls Select a Employee"); }

       }); 
   });//end of doc ready

</script>

控制器代码

 public ActionResult Index(string empcode)
         {
            DropdownValue();
            data.spx_Probation_display_mvc(empcode);
            //TeamProbReviewModel tmProbRe = new TeamProbReviewModel();
            var emp = data.spx_Probation_display();


        var tmProbRe1 = (from e in emp
                                   select new TeamProbReviewModel
                                   {

                                       emp_name = e.emp_name,
                                       Ecode = e.emp_no,
                                       Department = e.Department
                                       //Role = e.FunctionalRole,
                                       //AttendanceLocation = e.attnlocation,
                                       //DateofJoining = e.JOINDATE,
                                       //ExpectedDOC = e.expected_doc,

                                       //ProbationPeriod = e.Probation_Period


                                   }).FirstOrDefault();
        //List<TeamProbReviewModel> ls = new List<TeamProbReviewModel>(EmpItems.ToList());
        //var emplist = (IEnumerable<TeamProbReviewModel>)ls;
        //ViewData["Person"] = new SelectList(iPersonList, "Id", "Name");

        //List<Student1> ls = data.spx_students(2, "vikas").ToList<Student1>();




        return View(tmProbRe1);

    }

4 个答案:

答案 0 :(得分:0)

  <select id="Year">
    <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
</select>
<span id="lblSpan"></span>
    $(document).ready(function () {
            $("#Year").change(function () {
                var Year = $(this).val();
                if (Year != "Select") {
                    $.ajax({
                        url: '/TeamProbReview/Index',
                        type: 'post',
                        dataType: 'json',
                        data: { empcode: Year },
                     success: function (msg) {//tmProbRe1 result catch in msg and show in labal
                            if (msg != null) {
                                $("#lblSpan").text(msg);
                            }
                        }
                    });
                }
                else {
                    alert("Please select emp code");
                }
            });
        });
     [HttpPost]
            public ActionResult Index(string empcode)
            {
                  var tmProbRe1 = (from e in emp
                             where e.empcode==empcode
                             select new TeamProbReviewModel
                          {     emp_name = e.emp_name,
                                 Ecode = e.emp_no,
                                 Department = e.Department
                             }).FirstOrDefault();
            return Json(tmProbRe1, JsonRequestBehavior.AllowGet);
            }
retun result in json

答案 1 :(得分:0)

如果我得到它,你只需要发出AJAX请求,看看如何神奇地绑定值来查看。它不像那样工作。您应该在success函数中处理您的AJAX结果(请参阅jQuery docs):

$.ajax({
    // ...
    success: function(data) {
        if (data && data.label1)
            $('label1').text(data.label1);
    }
});

因此,如果您想要魔术数据绑定,请学习一些MVVM概念并检查适当的库,如AngularJSKnockoutJS

<强> UPD:

要在ASP.NET中使用JSON,您需要一个像Newtonsoft.Json这样的包。它将帮助您在控制器中序列化模型对象,然后在视图中填充它。有许多用法示例,例如http://www.codeproject.com/Articles/78928/Create-JSON-from-C-using-JSON-Library。谷歌祝福你

答案 2 :(得分:0)

<script type="text/javascript">
   $(function () {
       $("#Year").change(function () {
           var Year = $(this).val();
           if (Year != "Select") {
               $.ajax({
                   url: '/TeamProbReview/Index',
                   type: 'post',
                   dataType: 'json',
                   data: { empcode: Year },
                   success: function (result) {
                       $("#Ecode").val(result.Ecode);
                       $("#EmpName").val(result.emp_name);
                       $("#Department").val(result.Department);
                       $("#Role").val(result.Role);
                       $("#AttendanceLocation").val(result.AttendanceLocation);
                       //$("#DateofJoining").val(result.DateofJoining);
                       $("#ProbationPeriod").val(result.ProbationPeriod);
                    }
                });
           }
           else {
               alert("Please select emp code");
           }
       });
   });//end of doc ready
</script>

答案 3 :(得分:-1)

    $("#drpop").change(function () {
     var code = $(this).val(); 
    $.ajax({ 
    url: '/Ordering/OrderingTable',
    type: 'post',
    datatype: 'json',
    data: { OperCode: code },
     success:function(msg){
alert(msg);
     } }); }); 
    [HttpPost] 
    public ActionResult OrderingTable(string OperCode) 
    {
     Orderingbll order = new Orderingbll(); 
    var result = order.ListCategory(OperCode);//here you write your code
     return Json(result,JsonRequestBehavior.AllowGet);
    }