view代码：
<!--基本信息模块-->
2 <div class="profile_box" id="basicInfo">
3 <h2>基本信息</h2>
4
5 <%if (ViewData["Basic"] == "1")
6 {%><!--如果基本信息数据库中有则显示数据-->
7 <span class="c_edit" id="spantest"></span>
8
9 <div class="basicShow">
10 <span id="spantest1"><%=Model.NAME %> <%=Model.SEX %> <%=Model.EDUCATION_BACKGROUND %> <%=Model.WORK_EXPERIENCE %><br>
11 <%=Model.PHONENUMBER %> <%=Model.EMAIL %> <%=Model.SITUATIONID.SITUATION %>
12 <br>
13 </span>
14 <div class="m_portrait">
15 <div></div>
16 <img width="120" height="120" alt="<%=Model.PHOTONUMBER %>" src="<%=Url.Content("~/style/UserImages/"+Model.PHOTONUMBER) %>">
17 </div>
18 <!--改动-->
19 <%Html.Action("GetBasicInformation", new AjaxOptions { UpdateTargetId = "basicInfo" }); %>
20 <!--改动-->
21 </div>
22 <!--end .basicShow-->
23 <%} %>
24 <%else
25 { %><!--如果基本信息数据库中没有则显示完善基本信息-->
26 <div class="basicInformationAdd pAdd" id="basicAdd">
27 完善基本信息能让招聘单位更加了解我们哦…<br>
28 快来完善基本信息吧！
29 <span id="basicAddspan">添加基本信息</span>
30 </div>
31 <!--end .basicInformationAdd-->
32 <%} %>
33 <div class="basicEdit dn" id="basicEdit">
34
35 <%using (Ajax.BeginForm("GetBasicInformation", "Employee", new AjaxOptions { UpdateTargetId = "basicInfo", LoadingElementId = "loading", LoadingElementDuration = 3000, Url = Url.Action("GetBasicInformation"), HttpMethod = "Post" }, new { @class = "profileForm", id = "BasicInformation" }))
36 { %>
37 //UpdateTargetId：设置HTML元素的ID，从服务器接收的内容将被插入到该元素中；LoadingElementId：指定HTML元素的ID，这是执行ajax请求其间要显示的HTML元素
38 //LoadingElementDuration：指定动画的持续时间，用于显露由LoadingElementId指定的元素，单位为毫秒
//Url：设置所请求的服务器端URL，此项效果：如果未启用JavaScript，则创建一个回递给原始动作方法的form元素，确保优雅降级
//HttpMethod：请求的http方法
39
40 <!--<label id="NICKNAME" >姓名</label>-->
41 <%=Html.Label("NAME", "姓名")%>
42 <div>
43 <%=Html.TextBox("NAME","", new { @PlaceHolder = "姓名" })%>
44 <!--<input type="text" placeholder="姓名" value="jason" name="name" id="name">-->
45 <span class="redstar">*</span><%=Html.ValidationMessage("NAME", new { @class = "ValidationMessage" })%>
46 </div>
47
48
49 <%=Html.Label("SEX", "性别")%>
50 <div>
51 <ul class="profile_radio clearfix reset">
52
53 <li class="">男<em></em>
54 <%=Html.RadioButton("SEX", "男")%>
55 <!--<input type="radio" checked="checked" name="gender" value="男"> -->
56 </li>
57 <li class="">女<em></em>
58 <%=Html.RadioButton("SEX", "女")%>
59 <!--<input type="radio" name="gender" value="女"> -->
60 </li>
61 </ul>
62
63 </div>
64
65
66 <%=Html.Label("EDUCATION_BACKGROUND", "学历")%>
67
68 <div>
69 <%=Html.DropDownList("EDUCATION_BACKGROUND", new SelectListItem[]{
70 new SelectListItem(){Value="大专",Text="大专"},
71 new SelectListItem(){Value="本科",Text="本科"},
72 new SelectListItem(){Value="硕士",Text="硕士"},
73 new SelectListItem(){Value="博士",Text="博士"},
74 new SelectListItem(){Value="其他",Text="其他"}
75 }, new { @class = "profile_select_190 profile_select_normal" })%>
76 <span class="redstar">*</span>
77 </div>
78 <%=Html.Label("WORK_EXPERIENCE", "工作经验")%>
79 <div>
80 <%=Html.DropDownList("WORK_EXPERIENCE", new SelectListItem[]{
81 new SelectListItem(){Value="应届毕业生",Text="应届毕业生"},
82 new SelectListItem(){Value="1年",Text="1年"},
83 new SelectListItem(){Value="2年",Text="2年"},
84 new SelectListItem(){Value="3年",Text="3年"},
85 new SelectListItem(){Value="4年",Text="4年"},
86 new SelectListItem(){Value="5年",Text="5年"},
87 new SelectListItem(){Value="6年",Text="6年"},
88 new SelectListItem(){Value="7年",Text="7年"},
89 new SelectListItem(){Value="8年",Text="8年"},
90 new SelectListItem(){Value="9年",Text="9年"},
91 new SelectListItem(){Value="10年",Text="10年"},
92 new SelectListItem(){Value="10年以上",Text="10年以上"}
93 }, new { @class = "profile_select_190 profile_select_normal" })%>
94 <span class="redstar">*</span>
95 </div>
96
97 <%=Html.Label("PHONENUMBER", "手机号码")%>
98 <div>
99 <%=Html.TextBox("PHONENUMBER","", new { @PlaceHolder = "手机号码" })%>
100
101 <span class="redstar">*</span><%=Html.ValidationMessage("PHONENUMBER", new { @class = "ValidationMessage" })%>
102 </div>
103
104 <%=Html.Label("EMAIL", "联系邮箱")%>
105 <div>
106 <%=Html.TextBox("EMAIL","", new { @PlaceHolder = "接收面试通知的邮箱" })%>
107
108 <span class="redstar">*</span><%=Html.ValidationMessage("EMAIL", new { @class = "ValidationMessage" })%>
109 </div>
110
111 <%=Html.Label("SITUATIONID", "目前状态")%>
112 <div>
113
114 <%=Html.DropDownList("SITUATIONID.ID", new SelectListItem[]{
115 new SelectListItem(){Value="1",Text="我目前已离职，可快速到岗"},
116 new SelectListItem(){Value="2",Text="我目前正在职，正考虑换个新环境"},
117 new SelectListItem(){Value="3",Text="我暂时不想找工作"},
118 new SelectListItem(){Value="4",Text="我是应届毕业生"}
119 }, new { @class = "profile_select_410 profile_select_normal" })%>
120 </div>
121
122 <div class="savediv">
123 <input type="submit" value="保 存" class="btn_profile_save" id="Basic">
124 <!-- <input type="button" value="保 存" class="btn_profile_save" id="button1" />-->
125 <a class="btn_profile_cancel" href="javascript:;">取 消</a>
126 <!--改动-->
127 <input type="hidden" name="BasicVal" id="BasicVal" value="<%=ViewBag.Basic %>" /><!--用户信息表主键ID-->
128 <input type="hidden" name="IDVal" id="IDVal" value="<%=ViewData["ID"] %>" /><!--用户信息表主键ID-->
129 <input type="hidden" name="NAMEVal" id="NAMEVal" value="<%=ViewData["NAME"] %>">
130 <input type="hidden" name="SEXVal" id="SEXVal" value="<%=ViewData["SEX"] %>">
131 <input type="hidden" name="EDUCATION_BACKGROUNDVal" id="EDUCATION_BACKGROUNDVal" value="<%=ViewData["EDUCATION_BACKGROUND"] %>">
132 <input type="hidden" name="WORK_EXPERIENCEVal" id="WORK_EXPERIENCEVal" value="<%=ViewData["WORK_EXPERIENCE"] %>">
133 <input type="hidden" name="SITUATIONIDVal" id="SITUATIONIDVal" value="<%=ViewData["SITUATIONID"] %>">
134 <input type="hidden" name="EMAILVal" id="EMAILVal" value="<%=ViewData["EMAIL"] %>">
135 <input type="hidden" name="PHONENUMBERVal" id="PHONENUMBERVal" value="<%=ViewData["PHONENUMBER"] %>">
136 <input type="hidden" name="PHOTONUMBERVal" id="PHOTONUMBERVal" value="<%=ViewData["PHOTONUMBER"] %>">
137 <!--/改动-->
138 </div>
139 <%} %>
140 <!--end #profileForm-->
141
142 <div class="new_portrait" id="Photo">
143 <div class="portrait_upload" id="portraitNo">
144 <span>上传自己的头像</span>
145 </div>
146 <div class="portraitShow dn" id="portraitShow">
147 <img width="120" height="120" id="PhotoNumber" src="">
148 <span>更换头像</span>
149 </div>
150
151 <input type="file" value="" title="支持jpg、jpeg、gif、png格式，文件小于5M" name="Image" onchange="ajaxFileUpload()" id="Image" class="myfiles">
152 <!-- <input type="hidden" id="headPicHidden" /> -->
153
154 <span style="display: none;" id="headPic_error" class="error"></span>
155 </div>
156 <!--end .new_portrait-->
157 </div>
158 <!--end .basicEdit-->
159 <!--改动-->
160 <div id="loading" style="display: none">
161 <p>Loading data</p>
162 </div>
163 <!--/改动-->
164
165 <!--<input type="hidden" id="nameVal" value="jason">
166 <input type="hidden" id="genderVal" value="男">
167 <input type="hidden" id="topDegreeVal" value="大专">
168 <input type="hidden" id="workyearVal" value="3年">
169 <input type="hidden" id="currentStateVal" value="">
170 <input type="hidden" id="emailVal" value="jason@qq.com">
171 <input type="hidden" id="telVal" value="18644444444">
172 <input type="hidden" id="pageType" value="1"> -->
173
174 </div>
175 <!--end #basicInfo-->
176 <!--/基本信息模块-->
view效果图：
这是未填过基本信息的情况：
这是未填过基本信息，添加基本信息的界面：
这是填过基本信息的情况：
这是填过基本信息，修改基本信息的界面：（ajaxFileUpload上传显示图片见我的另一篇随笔：http://www.cnblogs.com/landiljy/p/5122804.html）
这是上图修改部分基本信息后显示的效果：
ajax.BeginForm的浏览器中源代码效果如下：
<form action="/Employee/GetBasicInformation?Length=8" class="profileForm" data-ajax="true" data-ajax-loading="#loading" data-ajax-loading-duration="3000" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#basicInfo" data-ajax-url="/Employee/GetBasicInformation" id="BasicInformation" method="post">
控制器中代码如下：
public ActionResult JianLi()
{
............
............
//省略
return View(u);
} public ActionResult GetBasicInformation()//基本信息
{
............
............
//省略
return PartialView(); } [HttpPost]
public ActionResult GetBasicInformation(EmployeeModelUser u)//ajax更新我的简历中的基本信息模块
{
............
............
//省略
return PartialView(); }
GetBasicInformation.ascx中代码：
1 <h2>基本信息</h2>
2 <span class="c_edit" id="spantest"></span>
3 <div class="basicShow" id="basicShow">
4 <span><%=Model.NAME %> <%=Model.SEX %> <%=Model.EDUCATION_BACKGROUND %> <%=Model.WORK_EXPERIENCE %><br>
5 <%=Model.PHONENUMBER %> <%=Model.EMAIL %> <%=Model.SITUATIONID.SITUATION %>
6 <br>
7 </span>
8 <div class="m_portrait">
9 <div></div>
10 <img width="120" height="120" alt="<%=Model.PHOTONUMBER %>" src="<%=Url.Content("~/style/UserImages/"+Model.PHOTONUMBER) %>">
11 </div>
12 </div>
13
14 <div class="basicEdit dn" style="display: none" id="basicEdit">//变化在style="display:none",开始是隐藏的，具体操作见后面jQuery代码
15
16 <%using (Ajax.BeginForm("GetBasicInformation", "Employee", new AjaxOptions { UpdateTargetId = "basicInfo", LoadingElementId = "loading", LoadingElementDuration = 3000, Url = Url.Action("GetBasicInformation"), HttpMethod = "Post" }, new { @class = "profileForm", id = "BasicInformation" }))
17 { %>
18 <input type="hidden" name="UserId" id="UserId" value="<%=ViewData["UserId"] %>" /><!--用户信息表主键ID-->
19 <!--<label id="NICKNAME" >姓名</label>-->
20 <%=Html.Label("NAME", "姓名")%>
21 <div>
22 <%=Html.TextBox("NAME", "", new { @PlaceHolder = "姓名" })%>
23 <!--<input type="text" placeholder="姓名" value="jason" name="name" id="name">-->
24 <span class="redstar">*</span><%=Html.ValidationMessage("NAME", new { @class = "ValidationMessage" })%>
25 </div>
26
27
28 <%=Html.Label("SEX", "性别")%>
29 <div>
30 <ul class="profile_radio clearfix reset">
31
32 <li class="">男<em></em>
33 <%=Html.RadioButton("SEX", "男")%>
34 <!--<input type="radio" checked="checked" name="gender" value="男"> -->
35 </li>
36 <li class="">女<em></em>
37 <%=Html.RadioButton("SEX", "女")%>
38 <!--<input type="radio" name="gender" value="女"> -->
39 </li>
40 </ul>
41
42 </div>
43
44
45 <%=Html.Label("EDUCATION_BACKGROUND", "学历")%>
46
47 <div>
48 <%=Html.DropDownList("EDUCATION_BACKGROUND", new SelectListItem[]{
49 new SelectListItem(){Value="大专",Text="大专"},
50 new SelectListItem(){Value="本科",Text="本科"},
51 new SelectListItem(){Value="硕士",Text="硕士"},
52 new SelectListItem(){Value="博士",Text="博士"},
53 new SelectListItem(){Value="其他",Text="其他"}
54 }, new { @class = "profile_select_190 profile_select_normal" })%>
55 <span class="redstar">*</span>
56 </div>
57 <%=Html.Label("WORK_EXPERIENCE", "工作经验")%>
58 <div>
59 <%=Html.DropDownList("WORK_EXPERIENCE", new SelectListItem[]{
60 new SelectListItem(){Value="应届毕业生",Text="应届毕业生"},
61 new SelectListItem(){Value="1年",Text="1年"},
62 new SelectListItem(){Value="2年",Text="2年"},
63 new SelectListItem(){Value="3年",Text="3年"},
64 new SelectListItem(){Value="4年",Text="4年"},
65 new SelectListItem(){Value="5年",Text="5年"},
66 new SelectListItem(){Value="6年",Text="6年"},
67 new SelectListItem(){Value="7年",Text="7年"},
68 new SelectListItem(){Value="8年",Text="8年"},
69 new SelectListItem(){Value="9年",Text="9年"},
70 new SelectListItem(){Value="10年",Text="10年"},
71 new SelectListItem(){Value="10年以上",Text="10年以上"}
72 }, new { @class = "profile_select_190 profile_select_normal" })%>
73 <span class="redstar">*</span>
74 </div>
75
76 <%=Html.Label("PHONENUMBER", "手机号码")%>
77 <div>
78 <%=Html.TextBox("PHONENUMBER", "", new { @PlaceHolder = "手机号码" })%>
79
80 <span class="redstar">*</span><%=Html.ValidationMessage("PHONENUMBER", new { @class = "ValidationMessage" })%>
81 </div>
82
83 <%=Html.Label("EMAIL", "联系邮箱")%>
84 <div>
85 <%=Html.TextBox("EMAIL", "", new { @PlaceHolder = "接收面试通知的邮箱" })%>
86
87 <span class="redstar">*</span><%=Html.ValidationMessage("EMAIL", new { @class = "ValidationMessage" })%>
88 </div>
89
90 <%=Html.Label("SITUATIONID", "目前状态")%>
91 <div>
92
93 <%=Html.DropDownList("SITUATIONID.ID", new SelectListItem[]{
94 new SelectListItem(){Value="1",Text="我目前已离职，可快速到岗"},
95 new SelectListItem(){Value="2",Text="我目前正在职，正考虑换个新环境"},
96 new SelectListItem(){Value="3",Text="我暂时不想找工作"},
97 new SelectListItem(){Value="4",Text="我是应届毕业生"}
98 }, new { @class = "profile_select_410 profile_select_normal" })%>
99 </div>
100
101 <div class="savediv">
102 <input type="submit" value="保 存" class="btn_profile_save" id="Basic">
103 <!-- <input type="button" value="保 存" class="btn_profile_save" id="button1" />-->
104 <a class="btn_profile_cancel" href="javascript:;">取 消</a>
105 <%=Html.ViewData["Error"]%>
106
107 <!--改动-->
108 <input type="hidden" name="BasicVal" id="BasicVal" value="<%=ViewBag.Basic %>" /><!--用户信息表主键ID-->
109 <input type="hidden" name="IDVal" id="IDVal" value="<%=ViewData["ID"] %>" /><!--用户信息表主键ID-->
110 <input type="hidden" name="NAMEVal" id="NAMEVal" value="<%=ViewData["NAME"] %>">
111 <input type="hidden" name="SEXVal" id="SEXVal" value="<%=ViewData["SEX"] %>">
112 <input type="hidden" name="EDUCATION_BACKGROUNDVal" id="EDUCATION_BACKGROUNDVal" value="<%=ViewData["EDUCATION_BACKGROUND"] %>">
113 <input type="hidden" name="WORK_EXPERIENCEVal" id="WORK_EXPERIENCEVal" value="<%=ViewData["WORK_EXPERIENCE"] %>">
114 <input type="hidden" name="SITUATIONIDVal" id="SITUATIONIDVal" value="<%=ViewData["SITUATIONID"] %>">
115 <input type="hidden" name="EMAILVal" id="EMAILVal" value="<%=ViewData["EMAIL"] %>">
116 <input type="hidden" name="PHONENUMBERVal" id="PHONENUMBERVal" value="<%=ViewData["PHONENUMBER"] %>">
117 <input type="hidden" name="PHOTONUMBERVal" id="PHOTONUMBERVal" value="<%=ViewData["PHOTONUMBER"] %>">
118 <!--/改动-->
119
120 </div>
121 <!--end #profileForm-->
122 <%} %>
123
124 <div class="new_portrait" id="Photo">
125 <div class="portrait_upload" id="portraitNo">
126 <span>上传自己的头像</span>
127 </div>
128 <div class="portraitShow dn" id="portraitShow">
129 <img width="120" height="120" id="PhotoNumber" src="">
130 <span>更换头像</span>
131 </div>
132
133 <input type="file" value="" title="支持jpg、jpeg、gif、png格式，文件小于5M" onchange="ajaxFileUpload()" name="Image" id="Image" class="myfiles">
134 <!-- <input type="hidden" id="headPicHidden" /> -->
135
136 <span style="display: none;" id="headPic_error" class="error"></span>
137 </div>
138 <!--end .new_portrait-->
139 </div>
140 <!--end .basicEdit-->
141 <!--改动-->
142 <div id="loading" style="display: none">
143 <p>Loading data</p>
144 </div>
145 <!--改动-->
jQuery代码：
<script type="text/javascript"> //自己写的js代码
$("#Image").live("ajaxFileUpload", function () { //<input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" />
$.ajaxFileUpload();
$("#Image").replaceWith($("#Image").clone(true));
$("#PhotoNumber").replaceWith('<img width="120" height="120" id="PhotoNumber" src="">');
});
function ajaxFileUpload() { //ajaxFileUpload上传用户头像（我的简历中的基本信息模块）, <input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" />成功
$.ajaxFileUpload
(
{
url: '/Employee/EditPhoto', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'Image', //文件上传控间的id属性 <input type="file" id="Image" name="Image" />
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
//alert(data);成功
$("#PhotoNumber").attr("src",data);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert('上传图片失败');
}
}
)
return false;
}
$(function(){//控制器通过viewdata赋值给view中的hidden,jquery取出hidden的value赋值给对应的控件，此为我的简历中的基本信息模块，成功
//alert($('#IDVal').val());成功
var BasicVal = $('#BasicVal').val();//基本信息是否填写过的判断依据
var IDVal = $('#IDVal').val();//用户ID
var SEXVal = $('#SEXVal').val();//用户性别
//alert($('#SEXVal').val());成功
var NAMEVal = $('#NAMEVal').val();//用户姓名
var EDUCATION_BACKGROUNDVal = $('#EDUCATION_BACKGROUNDVal').val();//用户学历
var WORK_EXPERIENCEVal = $('#WORK_EXPERIENCEVal').val();//用户工作经验
var SITUATIONIDVal = $('#SITUATIONIDVal').val();//用户目前状态
var EMAILVal = $('#EMAILVal').val();//用户联系邮箱
var PHONENUMBERVal = $('#PHONENUMBERVal').val();//用户手机号码
var PHOTONUMBERVal = $('#PHOTONUMBERVal').val();//用户头像照片
if(BasicVal=="1")//修改我的简历中的基本信息时，显示基本信息
{
$("#NAME").val(NAMEVal);
if(SEXVal=="男"){//连续修改两次,<li>的class就显示不出，待解决
$("input[type='radio'][value='男']").attr("checked",true);
$("input[type='radio'][value='女']").attr("checked",false);
$("input[type='radio'][value='男']").parent("li").attr("class","current");
$("input[type='radio'][value='女']").parent("li").attr("class","");
}else{
$("input[type='radio'][value='女']").attr("checked",true);
$("input[type='radio'][value='男']").attr("checked",false);
$("input[type='radio'][value='女']").parent("li").attr("class","current");
$("input[type='radio'][value='男']").parent("li").attr("class","");
}
$("select#EDUCATION_BACKGROUND option[value='EDUCATION_BACKGROUNDVal']").attr('selected', 'true');
$("select#WORK_EXPERIENCE option[value='WORK_EXPERIENCEVal']").attr('selected', 'true');
$("#PHONENUMBER").val(PHONENUMBERVal);
$("#EMAIL").val(EMAILVal);
$("select#SITUATIONID option[value='SITUATIONIDVal']").attr('selected', 'true');
}else{//我的简历中的基本信息未完善情况时，显示的基本信息
$("#NAME").val(NAMEVal);
$("select#EDUCATION_BACKGROUND option[value='大专']").attr('selected', 'true');
$("select#WORK_EXPERIENCE option[value='应届毕业生']").attr('selected', 'true');
$("select#SITUATIONID option[value='1']").attr('selected', 'true');
}
});
$('#Basic').live('click',function() {//保存时触发替换name=SEXVal的隐藏域，成功
$("input[type='hidden'][name='SEXVal']").replaceWith('<input type="hidden" name="SEXVal" id="SEXVal" value="<%=ViewData["SEX"] %>"> ');
});
$('#basicAdd').live('click',function() {//我的简历中的基本信息未完善情况，成功
$(this).hide();
$('#basicEdit').show(); //basicEdit为JianLi.aspx中基本信息模块中的
});
$('#spantest').live('click',function(){//注意ajax后原来的jquery会失效，要这样写才不会失效，成功
//alert('hello');
$('#basicShow').hide(); //basicShow为GetBasicInformation.ascx中的
$('#spantest').hide();
$('#basicEdit').show();
});
</script>