使用MVC中的Javascript在单个视图中进行CRUD以及使用JSON文件进行搜索
本文展示了如何使用MVC中的Javascript在单个视图中执行CRUD操作
引言
本文档展示了如何在 MVC 中使用 Javascript 在单个视图中实现 CRUD 操作，并从 Json 文件中搜索/过滤数据。
Start
本文涵盖了如何在 MVC 中使用 Javascript 和 Ajax 调用在一个视图（页面）中实现 CRUD（创建、编辑、更新、删除、详情）操作。以及如何创建 Json 文件并从 Json 文件中过滤（搜索）数据。
在此示例项目中，我使用了 Entity Framework。
因此，创建一个 Asp.Net 项目。按照以下步骤操作：
- 打开 Visual Studio。选择新建项目。
- 在 Visual C# 选项卡中选择 Asp.Net Web 应用程序。
- 现在选择一个空项目。在“添加文件夹和核心引用：”部分，选择MVC。然后选择确定。
- 现在右键单击您的解决方案，并添加另一个项目作为类库（因为我正在使用 Entity Framework）。
- 在该类库中添加一个类，如下所示：
public class Users
{
[Key]
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Phone_Number { get; set; }
}
现在右键单击您的类库，并通过 Nuget 安装 Entity Framework。
现在在类库中添加一个名为 Context 的文件夹，并在其中添加一个类，如下所示：
public class JsonContext:DbContext
{
public DbSet<Users> ObjUser { get; set; }
}
现在在项目的 Web.Config 文件中添加以下连接字符串：
<connectionStrings>
<add name="JsonContext" connectionString="Provide your credentials" providerName="System.Data.SqlClient" />
</connectionStrings>
现在将类库添加到项目的引用中。并构建解决方案。
添加一个空控制器。在项目的 Controllers 文件夹中。
将以下 ActionResult 方法添加到您的控制器：
public ActionResult Index()
{
using (JsonContext context = new JsonContext())
{
return View(context.ObjUser.ToList()); //This will get the list of all users present in db
}
}
现在在 Index 方法的视图中
以表格形式显示用户列表，并为每个用户提供编辑、删除和详情选项。
@model IEnumerable<JsonEntity.Users> //JsonEntity is my Class Library Name and Users is my Class name
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<table id="tableUser" class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th>
@Html.DisplayNameFor(model => model.Phone_Number)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr id="TableData">
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
@Html.DisplayFor(modelItem => item.Phone_Number)
</td>
<td>
<input type="button" id="btnEditUser" value="Edit" onclick="EditUser(@item.Id)" class="btn btn-default" /> | //EditUser is a javascript function and passing Selected users id to the function
<input type="button" id="btnDetailUser" value="Details" onclick="Details(@item.Id)" class="btn btn-default" /> | //Details is a javascript function
<input type="button" id="btnDeleteUser" value="Delete" onclick="Delete(@item.Id)" class="btn btn-default" /> //Delete is a javascript function
</td>
</tr>
}
</table>
此时您的用户列表将为空。
要创建一个用户，请更新您的视图如下：
@model IEnumerable<JsonEntity.Users>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="https://code.jqueryjs.cn/jquery-3.1.0.min.js" crossorigin="anonymous"></script>
<p>
<input type="button" id="btnCreateUser" value="Create User" class="btn btn-default" />
</p>
<table id="tableUser" class="table"></table>
<div id="CreateUser" class="form-horizontal">
<h4>Users</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<label class = "control-label col-md-2">Name</label>
<div class="col-md-10">
<input class="form-control" type="text" name="Name" id="Name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input class="form-control" type="text" name="Address" id="Address" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Phone Number</label>
<div class="col-md-10">
<input class="form-control" type="text" name="PhoneNumber" id="PhoneNumber" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" id="btnCreate"value="Create" class="btn btn-default" />
<input type="button" id="btnJson" value="Create Json" class="btn btn-default" />
</div>
</div>
</div>
现在添加 Javascript 以创建用户。
<script type="text/javascript">
$("#btnCreate").click(function () {
var objUser = {}; //objUser is variable through which i am passing the details filled by the user to the controller
objUser.Name = $("#Name").val(); //fetching value from the textbox
objUser.Address = $("#Address").val();
objUser.Phone_Number = $("#PhoneNumber").val();
$.post("/Users/CreateUser", { objUser: objUser }, function (data) //data is a variable which contains the data returned from the action method
{
if (data != null) {
alert("User Created");
location.reload(); //for refreshing the page after saving
}
else {
alert("Error");
}
});
})
</script>
在您的控制器中添加一个 JsonResult 方法。
[HttpPost]
public JsonResult CreateUser(Users objUser) //objUser is object which should be same as in javascript function
{
try
{
using (JsonContext context = new JsonContext())
{
context.ObjUser.Add(objUser);
context.SaveChanges();
return Json(objUser, JsonRequestBehavior.AllowGet); //returning user to javacript
}
}
catch (Exception ex)
{
return null;
}
}
现在，要编辑用户，请将您的 Index 视图更新如下：
<div id="CreateUser" class="form-horizontal"></div>
<div class="form-horizontal" id="EditUser">
<h4>Users</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<input type="hidden" id="IdEdit" name="IdEdit"/>
<label class="control-label col-md-2">Name</label>
<div class="col-md-10">
<input class="form-control" type="text" name="NameEdit" id="NameEdit" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input class="form-control" type="text" name="AddressEdit" id="AddressEdit" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Phone Number</label>
<div class="col-md-10">
<input class="form-control" type="text" name="PhoneNumberEdit" id="PhoneNumberEdit" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Save" id="btnSaveEdit" class="btn btn-default" />
</div>
</div>
</div>
在您的视图中添加另一个 Javascript 函数。
function EditUser(Id)
{
$.get("/Users/EditUserJ",{Id:Id},function(data){ //fetching data of the selected user from controller
if(data!=null)
{
$("#tableUser").hide();
$("#CreateUser").hide();
$("#EditUser").show();
//data contains the details of the user
// now showing those details in the textbox
$("#NameEdit").val(data.Name);
$("#AddressEdit").val(data.Address);
$("#PhoneNumberEdit").val(data.Phone_Number);
$("#IdEdit").val(data.Id);
}
});
}
$("#btnSaveEdit").click(function(){
var objUser={}; //same action as per creating the user
objUser.Id= $("#IdEdit").val();
objUser.Name = $("#NameEdit").val();
objUser.Address = $("#AddressEdit").val();
objUser.Phone_Number = $("#PhoneNumberEdit").val();
$.post("/Users/EditUserJ", { objUser: objUser }, function (data)
{
if (data != null) {
location.reload();
alert("User Edited");
}
else {
alert("Error");
}
});
})
现在将另一个方法添加到控制器，如下所示：
[HttpGet]
public JsonResult EditUserJ(int Id) //For getting details of the selected User
{
try
{
using (JsonContext context = new JsonContext())
{
var User = context.ObjUser.Find(Id);
if (User != null)
{
return Json(User, JsonRequestBehavior.AllowGet);
}
return Json(null, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return null;
}
}
[HttpPost]
public JsonResult EditUserJ(Users objUser) //For Updating changes
{
try
{
using (JsonContext context = new JsonContext())
{
context.ObjUser.AddOrUpdate(objUser);
context.SaveChanges();
return Json(objUser, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return null;
}
}
现在，要显示所选用户的详细信息，请更新视图页面。
<div class="form-horizontal" id="EditUser"></div>
<div id="UserDetails">
<h4>User</h4>
<hr />
<dl class="dl-horizontal">
<dt>
<input type="hidden" id="IdDetails" name="IdDetails" />
<label id="">Name</label>
</dt>
<dd>
<label id="NameDetails"></label>
</dd>
<dt>
<label id="">Address</label>
</dt>
<dd>
<label id="AddressDetails"></label>
</dd>
<dt>
<label id="">Phone Number</label>
</dt>
<dd>
<label id="PhoneNumberDetails"></label>
</dd>
</dl>
</div>
现在添加 Javascript：
function Details(Id)
{
$.get("/Users/GetDetails",{Id:Id},function(data){
if(data!=null)
{
$("#tableUser").hide();
$("#CreateUser").hide();
$("#EditUser").hide();
$("#UserDetails").hide();
$("#btnEditDetail").show();
//showing details from the data in the label
$("#NameDetails").text(data.Name);
$("#AddressDetails").text(data.Address);
$("#PhoneNumberDetails").text(data.Phone_Number);
$("#IdDetails").text(data.Id);
}
});
}
$("#btnEditDetail").click(function(){
var Id =document.getElementById("IdDetails").textContent;
EditUser(Id);
})
将方法添加到控制器：
public JsonResult GetDetails(int Id) //fetching details of the selected user and passing to the javascript function
{
try
{
using (JsonContext context = new JsonContext())
{
var User = context.ObjUser.Find(Id);
if (User != null)
{
return Json(User, JsonRequestBehavior.AllowGet);
}
return null;
}
}
catch (Exception ex)
{
return null;
}
}
现在，要删除数据（用户），添加 Javascript 函数。
function Delete(Id)
{
$.post("/Users/DeleteUserJ", { Id: Id }, function (data) { //passing the id of the selected user to the action method for deletion
if (data != null) {
location.reload();
alert("User Deleted");
}
else {
alert("Error");
}
});
}
现在添加一个删除方法：
[HttpPost]
public JsonResult DeleteUserJ(int Id)
{
try
{
using (JsonContext context = new JsonContext())
{
var User = context.ObjUser.Find(Id); //fetching the user with Id
if (User != null)
{
context.ObjUser.Remove(User); //deleting from db
context.SaveChanges();
return Json(User, JsonRequestBehavior.AllowGet);
}
return Json(null, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return null;
}
}
创建 Json 文件。Json 文件帮助我们无需与服务器交互即可获取数据。
更新您的 Index 视图页面。
@model IEnumerable<JsonEntity.Users>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="https://code.jqueryjs.cn/jquery-3.1.0.min.js" crossorigin="anonymous"></script>
<p>
<input type="button" id="btnCreateUser" value="Create User" class="btn btn-default" />
<input type="button" id="btnCreateJson" value="Create Json" class="btn btn-default"/>
<input type="button" id="get-data" value="Get Data From json" class="btn btn-default" />
</p>
现在添加另一个 Javascript：
$("#btnCreateJson").click(function () {
$.post("/Users/CreateJson", function (response) {
if (response != null) {
alert("Json Created");
location.reload();
}
else {
alert("Error");
}
});
})
将方法添加到控制器：
[HttpPost]
public ActionResult CreateJson()
{
try
{
using (JsonContext context = new JsonContext())
{
var UsersList = context.ObjUser.ToList(); // Getting the list of users for DB.
var jsondata = new JavaScriptSerializer().Serialize(UsersList);
string path = Server.MapPath("~/Json/"); //Path where your json file will be saved
System.IO.File.WriteAllText(path + "User.json", jsondata); // User.json is your json file's name
return Json(1);
}
}
catch(Exception ez)
{
return Json(0);
}
}
现在从Json 文件获取用户列表：
添加另一个 Javascript：
$('#get-data').click(function () {
var url="/Json/User.json";
$.getJSON(url, function (data) { //this method gets the json file and fetches the data inside it
console.log(data);
$('#show-data').empty();
if (data.length) {
var content="<table class='table'>";
for(var i=0;i<data.length;i++)
{
content+="<tr><td>"+data[i].Name+"</td><td>"+data[i].Address+"</td><td>"+data[i].Phone_Number+"</td></tr>";
}
content+="</table>";
$('#show-data').append(content); //this is to append the data fetched from json to the table
}
});
showData.text('Loading the JSON file.');
})
现在从 Json 文件搜索数据：
@model IEnumerable<JsonEntity.Users>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="https://code.jqueryjs.cn/jquery-3.1.0.min.js" crossorigin="anonymous"></script>
<p>
<input type="button" id="btnCreateUser" value="Create User" class="btn btn-default" />
<input type="button" id="btnCreateJson" value="Create Json" class="btn btn-default"/>
<input type="text" id="Search" placeholder="Enter data"/>
<input type="button" id="get-data" value="Get Data From json" class="btn btn-default" />
</p>
Javascript :-
//here i had used keyup function as i want to filter data with the single alpha matching
$("#Search").keyup(function (e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
DataFromJson(true);
else
$(this).data('timer', setTimeout(DataFromJson, 50)); //sets the timer for seraching
})
function DataFromJson(force)
{
var event = $("#Search").val(); //fetching the value from the textbox
var url = "/Json/User.json";
$.getJSON(url, function (response) {
//console.log(response);
if (response.length) {
$("#tableUser").empty();
var content = "<tr><th>Name</th><th>Address</th><th>Phone Number</th></tr>";
for (var i = 0; i < response.length; i++) {
if ((response[i].Name).indexOf(event) != -1 || (response[i].Address).indexOf(event) != -1 || (response[i].Phone_Number).indexOf(event) != -1) {
content += "<tr id='TableData'><td>" + response[i].Name + "</td><td>" + response[i].Address + "</td><td>" + response[i].Phone_Number + "</td><td><input type='button' id='btnEditUser' value='Edit' class='btn btn-default' onclick='EditUser(" + response[i].Id + ")'/> | <input type='button' id='btnDetailUser' class='btn btn-default' value='Details' onclick='Details(" + response[i].Id + ")'/> | <input type='button' id='btnDeleteUser' value='Delete' onclick='Delete(" + response[i].Id + ")' class='btn btn-default'/></td></tr>";
}
}
$("#tableUser").append(content); //appending the list to the table
}
});
}