通过在MVC中使用Jquery和Ajax搜索在html表中获取价值

Question

我想使用Id搜索数据并将其显示到html表（搜索结果），但是当我在浏览器中执行代码并单击搜索按钮后，它仅显示表（表的设计）而没有任何数据。我用谷歌搜索得到提示，但是没有找到任何适当的帮助。

控制器逻辑：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApp.Controllers;
using WebApp.Models;
namespace WebApp.Controllers
{
    public class SearchByIdController : Controller
    {
        MvcTstEntities ob = new MvcTstEntities();
        // GET: SearchById
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Search(string mail)
        {
            var str = (from test in ob.Emp where test.EmailId == mail select test).FirstOrDefault();
            return Json(str, JsonRequestBehavior.AllowGet);
        }
    }
}

查看逻辑

<body>


      <form class="form-inline">

          <div class="form-group mx-sm-3 mb-2">
              <label for="exampleInputEmail1">Email</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <button type="button" id="btnsearch" class="btn btn-primary mb-2">Search</button>
      </form>
      <div>
          <div class="container" id="tbleshow">
              <table class="table table-striped">
                  <tr>
                      <th>ID</th>
                      <th>Name</th>

                  </tr>


                      <tr>
                          <td id="ide" ></td>
                          <td id="nm"></td>

                      </tr>

              </table>
          </div>
      </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tbleshow").hide();

            $("#btnsearch").click(function (e) {
                debugger
                e.preventDefault();
                $("#tbleshow").show();
                return myfunction();

            });

            function myfunction() {

                var model = {

                    Email: $("#exampleInputEmail1").val(),



                }

                $.ajax({
                    type: 'GET',
                    url: "/SearchById/Search",
                    dataType: 'json',

                    data: {

                        Email: model.Email,


                    },


                    success: function (run) {

                        $("#ide").val(run.EmailId);
                        $("#nm").val(run.Name);


                        if (run) {

                            alert("This is the details");
                        }
                        else {
                            alert("Something wrong in success");
                        }

                    },

                    error: function () {
                        console.log('something went wrong - debug it!');
                    }
                });
            }





        });
    </script>


</body>

任何人都可以给我关于如何从控制器获取表中的值并将其绑定到表的任何想法。

Answer 1

问题是您正在使用带有mail作为参数名称的此操作方法：

public JsonResult Search(string mail)

但是在您的AJAX调用的data属性中包含如下所示的Email参数，该参数与控制器操作方法中定义的参数名称不匹配：

$.ajax({
     type: 'GET',
     url: "/SearchById/Search",
     dataType: 'json',

     data: {
         Email: model.Email, // this is the wrong part
     },

     success: function (run) {
         // show the results
     },
     error: function () {
         console.log('something went wrong - debug it!');
     }
});

为了符合AJAX参数名称，您应该将操作参数名称更改为Email ：

public JsonResult Search(string Email)
{
    var str = (from test in ob.Emp 
               where test.EmailId == Email 
               select test).FirstOrDefault();
    return Json(str, JsonRequestBehavior.AllowGet);
}

否则保持控制器动作不变，但更改AJAX参数名称以使其与控制器动作参数名称匹配：

$.ajax({
     type: 'GET',
     url: "/SearchById/Search",
     dataType: 'json',

     data: {
         mail: $("#exampleInputEmail1").val() // this is correct
     },

     success: function (run) {
         // show the results
     },
     error: function () {
         console.log('something went wrong - debug it!');
     }
});

更新：

如果run包含JSON字符串而不是对象，则需要首先解析该字符串：

var obj = JSON.parse(run);

然后使用该对象显示值：

$("#ide").val(obj.EmailId);
$("#nm").val(obj.Name);