ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

有时候，不得不考虑到以下场景问题：

数据库表字段会频繁更改扩展，而流行的重业务的js框架过于依赖json数据接口，导致的问题是，数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改。。。

一不小心就陷入坑坑洼洼。

这样的话，原来纯ASP.NET MVC绑定的方式，还是可以一用的，因为该方式不用再为那么多js代码烦恼。

不好意思，前面自说自话啊，直接上干货代码了————

Ajax.BeginForm

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

@{

Layout = null;

var ajaxOptions = new AjaxOptions {

UpdateTargetId = "updateHolder",

OnBegin = "DeliverableEdit.onBegin",

OnFailure = "DeliverableEdit.onFailure",

OnSuccess = "DeliverableEdit.onSuccess",

OnComplete = "DeliverableEdit.onComplete",

HttpMethod = "Post"

};

}

@using ( Ajax.BeginForm("Save", "DesignDeliverable", null, ajaxOptions, new { @class = "form-horizontal", id = "editForm" }) ) {

@Html.HiddenFor(x => x.Id)

@Html.HiddenFor(x => x.TaskCode)

@Html.HiddenFor(x => x.ShortName)

<div class="container-fluid pad-15">

<div class="row">

<div class="col-xs-6">

<div id="updateHolder" style="display:none;"></div>

<div class="form-group">

<label class="col-sm-2 control-label">Title</label>

<div class="col-sm-4">

@Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Title" })

@Html.ValidationMessageFor(x => x.Name)

</div>

<label class="col-sm-2 control-label">Type</label>

<div class="col-sm-4">

@Html.DropDownListFor(x => x.DeliverableType,

new List<SelectListItem> {

new SelectListItem { Text = "Type 1", Value = "1" },

new SelectListItem { Text = "Type 2", Value = "2" },

new SelectListItem { Text = "Type 3", Value = "3" },

new SelectListItem { Text = "Type 4", Value = "4" },

new SelectListItem { Text = "Type 5", Value = "5" },

},

new { @class = "form-control" })

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Description</label>

<div class="col-sm-10">

@Html.TextAreaFor(x => x.Description, new { @class = "form-control", rows = 4 })

</div>

<div class="form-group" style="margin-bottom: 3px;">

<div class="col-sm-2 col-sm-offset-10">

Weight

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Phase</label>

<div class="col-sm-3">

@Html.DropDownListFor(x => x.Phase,

new List<SelectListItem> {

new SelectListItem { Text = "Phase 1", Value = "1" },

new SelectListItem { Text = "Phase 2", Value = "2" },

new SelectListItem { Text = "Phase 3", Value = "3" },

new SelectListItem { Text = "Phase 4", Value = "4" },

new SelectListItem { Text = "Phase 5", Value = "5" },

},

new { @class = "form-control" })

</div>

<label class="col-sm-2 control-label">First</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="" />

</div>

<div class="col-sm-2">

<input class="form-control" type="text" placeholder="Weight" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Detail</label>

<div class="col-sm-3">

@Html.TextBoxFor(x => x.Detail, new { @class = "form-control", placeholder = "Detail" })

@Html.ValidationMessageFor(x => x.Detail)

</div>

<label class="col-sm-2 control-label">Second</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="" />

</div>

<div class="col-sm-2">

<input class="form-control" type="text" placeholder="Weight" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Size</label>

<div class="col-sm-3">

@Html.TextBoxFor(x => x.Size, new { @class = "form-control", placeholder = "Size" })

</div>

<label class="col-sm-2 control-label">Third</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="" />

</div>

<div class="col-sm-2">

<input class="form-control" type="text" placeholder="Weight" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">WBS Code</label>

<div class="col-sm-3">

@Html.TextBoxFor(x => x.WbsNumber, new { @class = "form-control", placeholder = "WBS Code" })

</div>

<label class="col-sm-2 control-label">Fourth</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="" />

</div>

<div class="col-sm-2">

<input class="form-control" type="text" placeholder="Weight" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Room</label>

<div class="col-sm-3">

@Html.DropDownListFor(x => x.RoomId,

(ViewBag.Rooms as List<SelectListItem>),

new { @class = "form-control" })

</div>

<label class="col-sm-2 control-label">A Variance</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="A Variance" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Area</label>

<div class="col-sm-3">

@Html.DropDownListFor(x => x.AreaId,

(ViewBag.Areas as List<SelectListItem>),

new { @class = "form-control" })

</div>

<label class="col-sm-2 control-label">B Variance</label>

<div class="col-sm-3">

<input class="form-control" type="text" placeholder="B Variance" />

</div>

<div class="form-group">

<label class="col-sm-2 control-label">Comments</label>

<div class="col-sm-10">

<textarea class="form-control" rows="4"></textarea>

</div>

<div class="col-xs-6">

<div class="form-group">

<div class="col-sm-12">

<label class="control-label">Documents</label>

<table class="table table-bordered table-hover table-condensed mt-10">

<thead>

<tr>

<th>File Name</th>

<th>Revision</th>

<th>Date</th>

</tr>

</thead>

<tbody>

<tr>

<td>P-001.pdf</td>

<td>01</td>

<td>03/15/2017</td>

</tr>

</tbody>

</table>

</div>

<div class="page_footer absolute-position">

<div class="page_footer_inner page_footer_light text-right">

@if ( Request["action"] != "View" ) {

<button class="btn btn-primary" id="btnSave"><i class="fa fa-floppy-o fa-fw"></i> Save</button>

}

<button id="btnCancel" class="btn btn-default"><i class="fa fa-close fa-fw"></i> Close</button>

</div>

<span id="notification"></span>

</div>

}

<script type="text/javascript">

var DeliverableEdit = DeliverableEdit || {};

(function (o) {

o.timer = null;

o.displayLoading = function (target) {

var element = $(target);

kendo.ui.progress(element, true);

o.timer = setTimeout(function () {

kendo.ui.progress(element, false);

}, 50);

};

o.hideLoading = function (target) {

setTimeout(function () {

clearTimeout(o.timer);

}, 50);

};

o.initializeValidation = function () {

$.validator.setDefaults({

showErrors: function (errorMap, errorList) {

$(".page_footer_inner button").removeProp("disabled", "disabled");

// Clean up any tooltips for valid elements

$.each(this.validElements(), function (index, element) {

var $element = $(element);

$element.data("title", "") // Clear the title - there is no error associated anymore

.removeClass("field-validation-error")

.tooltip("destroy");

});

// Create new tooltips for invalid elements

$.each(errorList, function (index, error) {

var $element = $(error.element);

$element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content

.data("title", error.message)

.data("placement", "bottom")

.addClass("field-validation-error")

.tooltip(); // Create a new tooltip based on the error messsage we just set in the title

});

}

});

$.validator.unobtrusive.parse($("#editForm"));

};

o.showSuccess = function (msg) {

$("#notification").data('kendoNotification').show(msg, "success");

};

o.showWarning = function (msg) {

$("#notification").data('kendoNotification').show(msg, "warning");

};

// Events during the submit of Ajax.Form

o.onBegin = function () {

$(".page_footer_inner button").prop("disabled", "disabled");

o.displayLoading($(".form-horizontal"));

}

o.onSuccess = function (data) {

o.hideLoading(o.timer);

if (!data || !data.code) {

o.showWarning("Failure,please try it again.");

return;

}

if (data && data.code) {

gridView.refreshGrid();

o.showSuccess("Saved successfully.");

setTimeout(function () {

gridView.closeDeliverableDialog();

}, 500);

}

o.onFailure = function (request, error) {

o.hideLoading(o.timer);

o.showWarning("Failure,please try it again.");

}

o.onComplete = function (request, status) {

o.hideLoading(o.timer);

$(".page_footer_inner button").removeProp("disabled", "disabled");

}

})(DeliverableEdit);

$(function () {

// To fix jquery.validation invalid issue

DeliverableEdit.initializeValidation();

$("#btnCancel").click(function (e) {

e.preventDefault();

gridView.closeDeliverableDialog();

});

$("#btnSave").click(function (e) {

e.preventDefault();

$(".form-horizontal").submit();

$(".page_footer_inner button").prop("disabled", "disabled");

});

$("#notification").kendoNotification({

position: {

pinned: true,

top: 15,

left: '50%'

},

autoHideAfter: 1000

});

</script>

记得引用对应的js库————

<link href="~/content/libs/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />

<link href="~/content/libs/fa/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />

<link href="~/content/app/css/site.css" rel="external nofollow" rel="stylesheet" type="text/css" />

<link href="~/content/app/css/bootstrap-extend.css" rel="external nofollow" rel="stylesheet" type="text/css" />

<link href="~/content/app/css/bootstrap-override.css" rel="external nofollow" rel="stylesheet" type="text/css" />

<script src="~/content/libs/jquery/jquery.min.js"></script>

<script src="~/content/libs/jquery/jquery.validate-vsdoc.js"></script>

<script src="~/content/libs/jquery/jquery.validate.js"></script>

<script src="~/content/libs/jquery/jquery.validate.unobtrusive.js"></script>

<script src="~/Content/libs/jquery/jquery.unobtrusive-ajax.min.js"></script>

后端代码————

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群