通过在 MVC 中使用 Jquery 和 ajax 进行搜索来获取 html 表中的值
Posted
技术标签:
【中文标题】通过在 MVC 中使用 Jquery 和 ajax 进行搜索来获取 html 表中的值【英文标题】：Getting value in the html table by searching using Jquery and ajax in MVC 【发布时间】：2019-05-12 06:06:06 【问题描述】：我想使用 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>
谁能告诉我如何从控制器获取表格上的值并将其绑定到表格。
【问题讨论】：
AJAX 回调永远不会到达控制器吗？我怀疑您的data 内容传递的参数错误。
那么如何将数据传递给控制器？
基本上这个问题是参数名称不匹配，你应该匹配双方的参数名称 - 请参阅答案以获得进一步的解释。
@geek 当您调用 Search 时，ob.Emp 是否有价值？我没有看到您为 Ob 对象设置值的代码，您刚刚使用新实例对其进行了初始化
ob.Emp当然有价值
【参考方案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);
【讨论】：
试过没有反应 尝试从客户端调试，run.EmailId和run.Name都返回undefined？控制器操作现在是否可以访问并且mail 包含一个值？
使用ajax在html表上绑定数据的逻辑是否正确？
val() 函数应该分配所有返回的数据，如果它们不是undefined。我没有发现您的 success 函数有任何问题，只是关注导致问题的 data。
[run.EmailId] 和 [run.Name] 都返回 undefined 我该怎么办以上是关于通过在 MVC 中使用 Jquery 和 ajax 进行搜索来获取 html 表中的值的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 通过 Ajax 在 ASP.NET MVC C# 中调用 Action 方法
通过 jQuery.Ajax 向 MVC 控制器发送多个项目
尝试通过 Spring MVC 和 Thymeleaf 使用 React/Ajax 调用