如何从视图返回模型和ajax调用结果 [英] How to return both model and ajax call result from view
本文介绍了如何从视图返回模型和ajax调用结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好任何人都可以帮我吗???
这里我使用的是网格和局部视图.....
实际上当我在部分视图中点击保存按钮时，数据应该使用ajax调用转到Controller并且rowseffeted应该回到ajax调用
同时网格中的数据应该使用模型更新.......
i我没有得到它......
这是我的代码
查看
@using BussinessModel
@ {
学生ObjStu =新学生（）;
} < br $>
@ {var grid = new WebGrid（Model，canPage） ：true，rowsPerPage：5，selectionFieldName：selectedRow，ajaxUpdateContainerId：gridContent）;
grid.Pager（WebGridPagerModes.NextPrevious）;}
@ grid.GetHtml （tableStyle：table，
headerStyle：head，
alternatingRowStyle：altRow，
selectedRowStyle：selectRow，
htmlAttributes：new {id =grid }，
fillEmptyRows：false，
模式：WebGridPagerModes.All，
firstText：<<首先，
previousText：< Prev，
nextText：Next>，
lastText：Last>>，
列：new [] {
grid.Column（RollNo，标题：RollNo，canSort：false），
grid.Column（标题： 名称，格式：@ @ item.Name @ Html.TextBox（Name_+（string）item.RollNo，（string）item .Name，new {@style =display：none}）），
grid.Column（标题：分支，格式：@ @ item.Branch @ Html.TextBox（Branch_+（string）item.RollNo，（string）item.Branch，new {@style =display：none}）），
grid.Column（标题：FeeRemaining，格式：@ @ item.FeeRemaining @ Html.TextBox（FeeRemaining_+（string）item.RollNo，（string）item.FeeRemaining，new {@style =display：none} ）），
grid.Column（标题：动作，格式：@< text> 编辑 更新 取消 删除）
}）
@ ViewBag .Rowseffected1
< 表 width = 100％ >
< tr >
< td width = 30％ >
< ; 表格 >
< tr >
< td >
< br / >
< br / >
< br / >
< a id = 保存 href = ＃ > 保存< span class =code-keyword>< / a > < br / >
< br / >
< br / >
< br < span class =code-keyword> / >
< / td >
< / tr >
< tr >
< td >
< a id = 更新 href = ＃ > 更新< span class =code-keyword>< / a > < br / >
< br / >
< br / >
< br / >
< / td >
< / tr >
< tr >
< td >
< a id = 删除 href = ＃ > 删除< / a > < br / >
< br / >
< br / >
< br / >
< / td >
< / tr >
< / table >
< / td >
< span class =code-keyword>< td width = 70％ >
< div id = SavePartialView style = < span class =code-keyword> display：none >
@ Html.Partial（〜/ Views / _SavePartialView.cshtml）
< / div >
< div id = UpdatePartialView style = display：none >
@ Html.Partial （〜/ Views / _UpdatePartialView.cshtml）
< / div >
< div id = DeletePartialView style = display：none >
@ Html.Partial（〜 /Views/_DeletePartialView.cshtml）
< / div >
< / td >
< td > < / td >
< / tr >
< / table >
< script 类型 = text / javascript >
$（ ＃Save ）.click（ function （）{
$（ ＃SavePartialView）表示（）;
$（ ＃UpdatePartialView）。hide（）;
$（ ＃DeletePartialView）。hide（）;
}）;
$（ #Update）。click（ function （）{
$（ ＃SavePartialView）。hide（）;
$（ ＃UpdatePartialView）。show（ ）;
$（ ＃DeletePartialView）。hide（）;
}）;
$（ ＃Delete）。click（ function （）{
$（ ＃SavePartialView）。 hide（）;
$（ ＃UpdatePartialView）。hide（）;
$（ ＃DeletePartialView）。show（）;
}）;
< / script >
部分视图代码：
< html>
< head>
< title> < / title >
< script src = 〜/ Scripts / jquery-2.2.1。 JS>< /脚本>
< script src = 〜/ Scripts / jquery-2.2.1.min.js>< /脚本>
< / head >
< body>
< div>
@ * design 保存部分视图* @
< table>
< tr>
< td> Roll No：< / td >
< td> @ Html.TextBox（ RollNo）< / td >
< / tr >
< tr>
< td>名称：< / td >
< td> @ Html.TextBox（ 名称）< / td >
< / tr >
< tr>
< td>分支：< / td >
< td> @ Html.TextBox（ 分支）< / td >
< / tr >
< tr>
< td>剩余费用：< / td >
< td> @ Html.TextBox（ FeeRemaining）< / td >
< / tr >
< tr>
< td> < / td >
< td>< input type = button value = 保存 id = BtnSave onclick = Save（） /> < / td >
< / tr >
< tr>
< td> < / td >
< / tr >
< / table >
< / div >
@ * Ajax呼叫将视图中的数据发送到控制器* @
< script type = text / javascript>
function 保存（）
{
var RollNo = $（ ＃RollNo）。val（）;
var 名称= $（ ＃Name ）VAL（）;
var 分支= $（ #Cranch ）VAL（）;
var FeeRemaining = $（ ＃FeeRemaining ）VAL（）;
调试器;
$ .ajax（{
url：' / Index / SaveToDB /' ，
类型： POST，
dataType：' html'，
contentType：' application / json; charset = utf-8'，
data： JSON .stringify（{
RollNo：RollNo，
名称：姓名，
分行：分行，
费用余额：费用余额
}），
成功：（功能（结果）{
// 调试器;
alert（' success'）;
}），
错误：（ function （xhr）{
// 调试器;
alert（' 错误'）;
}）
}）;
}
< / script>
< / body >
< / html >
我尝试过：
控制器代码：
使用系统;
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web;
使用 System.Web.Mvc;
使用存储库;
使用 BussinessModel;
命名空间 CurdProjectLevel.Controllers
{
public class IndexController：Controller
{
//
// 获取：/ Index /
Student ObjStudent = new Student（）;
public ActionResult Index（）
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo（）;
return 查看（ 〜/ Views /索引/ Index.cshtml，Obj.GetDB（））;
}
public ActionResult删除（ int id）
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo（）;
int RowsEffected = 0 ;
列表< Student> ObjSt = new List< Student>（）;
尝试
{
RowsEffected = Obj.Delete（id）;
if （RowsEffected == 1 ）
{
ViewBag。 Rowseffected1 = 行选择;
// ObjSt = Obj.GetDB（）;
// 返回视图（〜/ Views / Index / Index.cshtml，ObjSt）;
}
else
{
ViewBag.Rowseffected1 = 行无法删除/未找到行;
}
}
catch
{
抛;
}
return RedirectToAction（ 索引，RowsEffected）;
}
public ActionResult SaveToDB（Student ObjStudent）
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo（）;
int RowsEffected = Obj.SaveToDB（ObjStudent）;
if （RowsEffected == 1 ）
{
ViewBag。 Rowseffected1 = RowsEffected;
}
else
{
ViewBag.Rowseffected1 = 行无法保存;
}
返回查看（ 〜/查看/索引/ Index.cshtml，RowsEffected）;
}
}
}
解决方案
（ ＃Save）。click（ function （）{
（ ＃SavePartialView ）。show（）;
（ ＃UpdatePartialView ）隐藏（）;
Hi Can any one help me out please???
here i am using web grid and partial views.....
actually when i click on save button in partial view the data should go to the Controller using ajax call and rowseffeted should come back to ajax call
At the same time data in web grid should update using model.......
i am not getting it......
here is my Code
In View
@using BussinessModel
@{
Student ObjStu = new Student();
}
@{var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);}
@grid.GetHtml(tableStyle: "table",
headerStyle: "head",
alternatingRowStyle: "altRow",
selectedRowStyle: "selectRow",
htmlAttributes: new { id = "grid" },
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("RollNo",header: "RollNo", canSort: false),
grid.Column(header: "Name",format: @ @item.Name @Html.TextBox("Name_" + (string)item.RollNo, (string)item.Name, new { @style = "display:none" })),
grid.Column(header: "Branch",format: @ @item.Branch @Html.TextBox("Branch_" + (string)item.RollNo, (string)item.Branch, new { @style = "display:none" })),
grid.Column(header: "FeeRemaining",format: @ @item.FeeRemaining @Html.TextBox("FeeRemaining_" + (string)item.RollNo, (string)item.FeeRemaining, new { @style = "display:none" })),
grid.Column(header: "Action",format:@<text> EditUpdateCancelDelete)
})
@ViewBag.Rowseffected1
<table width="100%">
<tr>
<td width="30%">
<table>
<tr>
<td>
<br />
<br />
<br />
<a id="Save" href="#">Save</a><br />
<br />
<br />
<br />
</td>
</tr>
<tr>
<td>
<a id="Update" href="#">Update</a><br />
<br />
<br />
<br />
</td>
</tr>
<tr>
<td>
<a id="Delete" href="#">Delete</a><br />
<br />
<br />
<br />
</td>
</tr>
</table>
</td>
<td width="70%">
<div id="SavePartialView" style="display:none">
@Html.Partial("~/Views/_SavePartialView.cshtml")
</div>
<div id="UpdatePartialView" style="display:none">
@Html.Partial("~/Views/_UpdatePartialView.cshtml")
</div>
<div id="DeletePartialView" style="display:none">
@Html.Partial("~/Views/_DeletePartialView.cshtml")
</div>
</td>
<td></td>
</tr>
</table>
<script type="text/javascript">
$("#Save").click(function () {
$("#SavePartialView").show();
$("#UpdatePartialView").hide();
$("#DeletePartialView").hide();
});
$("#Update").click(function () {
$("#SavePartialView").hide();
$("#UpdatePartialView").show();
$("#DeletePartialView").hide();
});
$("#Delete").click(function () {
$("#SavePartialView").hide();
$("#UpdatePartialView").hide();
$("#DeletePartialView").show();
});
</script>
In Partial view Code:
<html>
<head>
<title></title>
<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
</head>
<body>
<div>
@*design for the Save Partial View*@
<table>
<tr>
<td>Roll No :</td>
<td>@Html.TextBox("RollNo")</td>
</tr>
<tr>
<td>Name :</td>
<td>@Html.TextBox("Name")</td>
</tr>
<tr>
<td>Branch :</td>
<td>@Html.TextBox("Branch")</td>
</tr>
<tr>
<td>Fee Remaining :</td>
<td>@Html.TextBox("FeeRemaining")</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Save" id="BtnSave" onclick="Save()"/></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
@*Ajax Call For Sending the data from the view to contoller*@
<script type="text/javascript">
function Save()
{
var RollNo = $("#RollNo").val();
var Name = $("#Name").val();
var Branch = $("#Branch").val();
var FeeRemaining = $("#FeeRemaining").val();
debugger;
$.ajax({
url:'/Index/SaveToDB/',
type: "POST",
dataType: 'html',
contentType: 'application/json; charset=utf-8',
data:JSON.stringify({
RollNo: RollNo,
Name: Name,
Branch: Branch,
FeeRemaining: FeeRemaining
}),
success: (function (result) {
// debugger;
alert('success');
}),
error: (function (xhr) {
// debugger;
alert('error');
})
});
}
</script>
</body>
</html>
What I have tried:
Controller Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Repository;
using BussinessModel;
namespace CurdProjectLevel.Controllers
{
public class IndexController : Controller
{
//
// GET: /Index/
Student ObjStudent = new Student();
public ActionResult Index()
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo();
return View("~/Views/Index/Index.cshtml",Obj.GetDB());
}
public ActionResult Delete( int id)
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo();
int RowsEffected = 0;
List<Student> ObjSt = new List<Student>();
try
{
RowsEffected = Obj.Delete(id);
if (RowsEffected == 1)
{
ViewBag.Rowseffected1 = "Row Delected";
//ObjSt = Obj.GetDB();
//return View("~/Views/Index/Index.cshtml", ObjSt);
}
else
{
ViewBag.Rowseffected1 = "Row Cannot Delete/Row Not Found";
}
}
catch
{
throw;
}
return RedirectToAction("Index",RowsEffected);
}
public ActionResult SaveToDB(Student ObjStudent)
{
RetriveRepositoryInfo Obj = new RetriveRepositoryInfo();
int RowsEffected = Obj.SaveToDB(ObjStudent);
if (RowsEffected == 1)
{
ViewBag.Rowseffected1 = RowsEffected;
}
else
{
ViewBag.Rowseffected1 = "Row Cannot Save";
}
return View("~/Views/Index/Index.cshtml",RowsEffected);
}
}
} 解决方案
("#Save").click(function () {
("#SavePartialView").show();
("#UpdatePartialView").hide();
这篇关于如何从视图返回模型和ajax调用结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
