您的位置:首页 > Web前端 > JQuery

jquery ajax 后台和前台数据交互 C#

2013-07-02 18:17 260 查看
<input type="button" id="updateInfo" value="更改货载重量" />
<div id="updateDiv" style="display:none;">
<input type="hidden" value="@Model.ContainerCode" id="containercode"/>
新毛重:<input type="text" id="nmz" />
新重量:<input type="text" id="nzl" />
新件数:<input type="text" id="njs" />
<input type="button" id="submit" value="提交" />
</div>


也是刚接触不久,代码中可能有一些不足之处,今天写下,以后自己可能不需要去上网查找相关的东西。

这个是VIEW中的代码,

<script type="text/javascript">
$(document).ready(function () {

$("#updateInfo").click(function () {
$("#nmz").attr("value","")
$("#nzl").attr("value", "");
$("#njs").attr("value", "");//调试的时候,刷新界面INPUT内的值会保留。所以这里需要清空INPUT
$("#updateDiv").show();

});

$("#submit").click(function () {
var containercode = $("#containercode").val();
var nmz = $("#nmz").val();
var nzl = $("#nzl").val();
var njs = $("#njs").val();

$.ajax({
type: "POST",
url: "/UnitLoads/updateHeight",
data: {
containerCode: containercode,
mz: nmz,
zl: nzl,
js: njs
},
dataType: "JSON",
success: function (result) {

if (result.toString() == "0") {
alert("未能成功!请检查输入!!");
}
else {
alert("更改成功!");
document.location.reload();//重新加载当前页面
}

}
});

});

});
</script>


后台方法代码如下:

    [HttpPost]
public int updateHeight(string containerCode, string mz, string zl, string js)//对应AJAX中的DATA中的变量
{

if (string.IsNullOrEmpty(containerCode) || string.IsNullOrEmpty(mz) || string.IsNullOrEmpty(zl) || string.IsNullOrEmpty(js))
{
return 0;//返回给前台来判断操作是否成功
}
CommandHelper.DoCommand(context =>
{
WmsRepositories repositories = new WmsRepositories(context);
UnitLoad temp = repositories.UnitLoadRepository.GetCurrentUnitLoadByContainerCode(containerCode);
temp.Meide.mz = Decimal.Parse(mz);

foreach (var item in temp.Items)
{
item.Meide.zl = Decimal.Parse(zl);
item.Meide.js = int.Parse(zl);
}

});
return 1;
}


以上的代码主要的意义是让自己知道前台怎么向后天传递多个数据,已经后台怎么向前台传数据。当然现在向前台传递的数据比较简单,就一个INT类型的。

下面的代码是前台向前台传递多个数据,并且后天也向前台传递多个数据的代码,

前台:

$.ajax({
type: "POST",

url: "/NewOrder/getMaterialDetail",
data: {
a: 1,
b: 2,
c: "cccc"
},
dataType: "JSON",
success: function (result) {

alert(result.a);
alert(result.b);
alert(result.c);

$("#details").append(result);
}
});


后台:

public class xxx
{
public int a { get; set; }
public int b { get; set; }
public string c { get; set; }
}

[HttpPost]
public ActionResult getMaterialDetail(xxx x)
{
string json =  Newtonsoft.Json.JsonConvert.SerializeObject(x);
return Content(json);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: