版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012571917/article/details/77906896
form表单提交案例
这是.net mvc 的一个form提交小例子
@model Disease这是一个新建项目的模式对话框。使用的是bootstrap的model。
<div id="newProject" class="modal fade modal-scroll in" role="dialog" aria-labelledby="newProjectLabel" aria-hidden="true">
<div class=" modal-dialog">
<div class="modal-content">
<form id="formNewProject" class="form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">新建项目</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 control-label">所属病种库:</label>
<div class="col-md-9">
<input id="hfDiseaseId" name="DiseaseId" type="hidden" class="form-control select2 librarySelector" value="" />
</div>
</div>
@*<div class="form-group">
<label class="col-md-3 control-label">项目编号:</label>
<div class="col-md-9">
<input id="txtProjectNo" name="ProjectNo" type="text" class="form-control" placeholder="请输入项目编号" value="" />
<span class="help-block"></span>
</div>
</div>*@
<div class="form-group">
<label class="col-md-3 control-label">项目名称:</label>
<div class="col-md-9">
<input id="txtProjectName" name="ProjectName" type="text" class="form-control" placeholder="请输入项目名称" required>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">负责人:</label>
<div class="col-md-9">
<input id="txtProjectOwner" name="ProjectOwner" type="hidden" class="form-control select2 userSelector" />
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">经费来源:</label>
<div class="col-md-9">
<input id="txtDataValue" name="DataValue" type="hidden" class="form-control select2 DataValueSelector" />
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">联系人:</label>
<div class="col-md-9">
<input id="txtProjectContact" name="ProjectContact" type="hidden" class="form-control select2 userSelector" />
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">描 述:</label>
<div class="col-md-9">
<textarea id="txtProjectDescription" name="ProjectDescription" class="form-control" placeholder="请输入项目描述" rows="4"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">项目类型:</label>
<div class="col-md-5">
<select id="ddlProjectType" class="form-control">
<option value="1">样本项目</option>
<option value="2">基础研究</option>
<option value="3">临床试验项目</option>
<option value="4">随访项目</option>
</select>
</div>
<div class="col-md-4">
<input id="cbMultiCenter" type="checkbox" class="form-control" />
<label class="control-label">多中心项目</label>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">是否GCP项目:</label>
<div class="col-md-9">
<input id="cbGcpProject" type="checkbox" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">是否启用日历:</label>
<div class="col-md-9">
<input id="cbIsShowCalendar" type="checkbox" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">日期格式:</label>
<div class="col-md-5">
<select id="ddlProjectDateFormat" name="ddlProjectDateFormat" class="form-control">
<option value="yyyy年MM月dd日">yyyy年MM月dd日</option>
<option value="yyyy/MM/dd">yyyy/MM/dd</option>
<option value="yyyy-MM-dd">yyyy-MM-dd</option>
<option value="yyyyMMdd">yyyyMMdd</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-sm-12">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn green">确定</button>
</div>
</div>
</form>
</div>
</div>
</div><script>
$(function () {
//验证
var form3 = $('#formNewProject');
var error3 = $('.alert-danger', form3);
var success3 = $('.alert-success', form3);
form3.validate({
errorElement: 'span',
errorClass: 'help-block',
focusInvalid: false,
ignore: "",
rules: {
//DiseaseId: {
// required: true
//},
//ProjectNo: {
// required: true
//},
ProjectName: {
required: true,
},
DataValue: {
required: true
},
ProjectOwner: {
required: true,
},
ProjectContact: {
required: true,
},
//ProjectDescription: {
// required: true
//},
ddlProjectDateFormat: {
required: true
}
},
messages: {
//DiseaseId: {
// required: "请选择病种库"
//},
//ProjectNo: {
// required: "请设置项目编号"
//},
ProjectName: {
required: "请设置项目名称"
},
DataValue: {
required: "请设置经费来源"
},
ProjectOwner: {
required: "请设置项目负责人"
},
ProjectContact: {
required: "请设置项目联系人"
},
//ProjectDescription: {
// required: "请设置项目描述"
//},
ddlProjectDateFormat: {
required: "请设置项目表单日期显示格式"
}
},
errorPlacement: function (error, element) {
if (element.parent(".input-group").size() > 0) {
error.insertAfter(element.parent(".input-group"));
} else if (element.attr("data-error-container")) {
error.appendTo(element.attr("data-error-container"));
} else if (element.parents('.radio-list').size() > 0) {
error.appendTo(element.parents('.radio-list').attr("data-error-container"));
} else if (element.parents('.radio-inline').size() > 0) {
error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
} else if (element.parents('.checkbox-list').size() > 0) {
error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
} else if (element.parents('.checkbox-inline').size() > 0) {
error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
} else {
error.insertAfter(element);
}
},
invalidHandler: function (event, validator) {
success3.hide();
error3.show();
App.scrollTo(error3, -200);
},
highlight: function (element) {
$(element)
.closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element)
.closest('.form-group').removeClass('has-error');
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
},
submitHandler: function (form) {
success3.show();
error3.hide();
var project = {
diseaseId: $("#hfDiseaseId").val(),
dateFormat: $("#ddlProjectDateFormat").val(),
name: $("#txtProjectName").val(),
dataIds: $('#txtDataValue').val(),
owner: $('#txtProjectOwner').val(),
contact: $("#txtProjectContact").val(),
description: $("#txtProjectDescription").val(),
type: $("#ddlProjectType").val(),
isMultiCenter: $("#cbMultiCenter")[0].checked,
isGCP: $("#cbGcpProject")[0].checked,
IsShowCalendar: $("#cbIsShowCalendar")[0].checked
};
$.ajax({
url: "@Url.Action("Create", "Project")",
type: "post",
dataType: "json",
data: project,
cache: false,
beforeSend: function (XMLHttpRequest) {
$('body').addClass('loading');
},
success: function (data, textStatus, jqXHR) {
if (data.Error === 0) {
location.href = "@Url.Action("Details", "Project")" + "/" + data.Data;
}
else {
alert(data.Message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//异常处理
alert(XMLHttpRequest.responseText);
},
complete: function (XMLHttpRequest, textStatus) {
$('body').removeClass('loading');
//关闭加载动画
}
});
return false;
}
});
$('.select2me', form3).change(function () {
form3.validate().element($(this));
});
$("#hfDiseaseId").change(function () {
form3.validate().element($(this));
}).select2({
placeholder: "请选择病种库...",
//allowClear: true,
minimumInputLength: 0,
ajax: {
url: "@Url.Action("GetLibraryData", "Library")",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return { limit: 100000, key: term };
},
results: function (data, page) {
return { results: data }
}
},
formatResult: function (d) {
return d.name;
},
formatSelection: function (d) {
return d.name;
},
initSelection: function (element, callback) {
}
});
var index;
$('#txtDataValue').change(function () {
form3.validate().element($(this));
}).select2({
placeholder: "请选择经费来源...",
minimumInputLength: 0,
multiple: true,
id: function (index) {
return index.Id;
console.log(index)
},
ajax: {
url: "@Url.Action("_DataValueSelector", "Project")",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
return { results: data }
},
cache: true
},
formatResult: function (d) {
return d.Data_Value + "[" + d.Id + "]";
},
formatSelection: function (d) {
return d.Data_Value + "[" + d.Id + "]";
},
initSelection: function (element, callback) {
}
});
$('#txtProjectOwner').change(function () {
form3.validate().element($(this));
}).select2({
placeholder: "请选择负责人...",
minimumInputLength: 0,
ajax: {
url: "@Url.Action("_UserSelector", "Shared")",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return { limit: 10, key: term };
},
results: function (data, page) {
console.log(data);
return { results: data }
}
},
formatResult: function (d) {
return d.name + "[" + d.id + "]";
},
formatSelection: function (d) {
return d.name + "[" + d.id + "]";
},
initSelection: function (element, callback) {
}
});
$('#txtProjectContact').change(function () {
form3.validate().element($(this));
}).select2({
placeholder: "请选择联系人...",
minimumInputLength: 0,
ajax: {
url: "@Url.Action("_UserSelector", "Shared")",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return { limit: 10, key: term };
},
results: function (data, page) {
return { results: data }
}
},
formatResult: function (d) {
return d.name + "[" + d.id + "]";
},
formatSelection: function (d) {
return d.name + "[" + d.id + "]";
},
initSelection: function (element, callback) {
}
});
$('.date-picker .form-control').change(function () {
form3.validate().element($(this));
})
});
</script>效果图如下。提示：一个html页面只可以有一个form。因此只可以有一个form提交，form提交一般用于页面标签元素比较多的时候，这里只有两个属性，但是用来熟悉form最好了。
