MVC常見問題小總結

最近剛開始在項目中使用MVC，（ps：不要笑我老土啊）。使用的過程中遇到了一些小問題，記錄下來以便日后翻閱。

---

1. 在MVC中項目中使用JQuery，$.Post方法提交數據時產生中文亂碼現象？

      解決方法：

• 在$.post時進行數據編碼，使用escape方法

$.post("@Url.Action("AddFriendLink" , "Setup")" ,{"Name" :escape(name)},function(data){

if(data>0){

                    alert( '添加成功！' );

                    window.location.reload();

                }

else{

                    alert( '添加失敗！' );

                }

            });

• 在后台進行解碼，使用Server.UrlDecode方法。

public JsonResult Add(string Name)

{

     DemoClass demoClass= newDemoClass 

            {

                Name = Server.UrlDecode(Name)

            };

     int result = demoService.Add(demoClass);

     return Json(result);

}

---

2. MVC中如何設置文本框的寬度？

    其實這個本不算是問題，不過剛開始還是寫錯了。

• 剛開始寫的是：

@Html.TextBoxFor(model => model.Name, new { width="300px" })             （×）

發現沒有效果。

• 實施了第二方案，搞定了。

@Html.TextBoxFor(model => model.Name, new { @style = "width:300px" })  （√）

---

3.Html.RadioButtonFor怎么使用呢？

   像下面這樣就可以了。當Model.IsStudent=true時會自動選中第一項，以此類推。

@Html.RadioButtonFor(model=>model.IsStudent,true)是
@Html.RadioButtonFor(model => model.IsStudent, false)否

---

4. @helper自定義方法

@helper GetStatusName(int status)

    {

       //code block

    }

調用時直接使用@GetStatusName(2)即可。

---

5.model多級引用時，對應的html？

@ Html.TextBoxFor(model => model.Topic.Title）

對應生成的HMTL代碼為：

<input name="Topic.Title" class="ConInpon" id="Topic_Title" Onkeyup="getLen(this)" type="text"/>

在寫腳本的時候要注意了啊。

---

6.DropDowlList控件數據綁定的幾種常用方式？

①下拉框中的選項為幾個簡單的固定值。

@Html.DropDownList("ProvinceId", new SelectListItem[]{
                      new SelectListItem{ Text="選擇類別",Value="0", Selected=true},
                      new SelectListItem{Text="類別A",Value="1"},
                      new SelectListItem{Text="類別B",Value="2"}
                      })

②將數據封裝為SelectList類型，並且放在ViewBag中進行傳遞。

• controller層：

IList< Person> personList =personService.GetList();

ViewBag.personId= new SelectList(personList , "Id", "Name", queryParam.EditorId);

• View層：直接根據ID進行綁定就可以了。

@Html.DropDownList( "personId")

③如果頁面中的數據比較多，直接都放在viewbag中傳遞會比較亂，我們可以將頁面中需要的數據封裝成一個類，其中Select類型被封裝為一個屬性。

• 封裝類

public class IndexView

{

   public SelectList PersonList{get;set;}

   …

}

• controller: 對IndexView中的屬性賦初始值。

IList< Person> personList =personService.GetList();

IndexView indexView = new IndexView ()

            {

                     PersonList= new SelectList(personList , "Id", "Name", personList )

            };

            ViewBag.indexView = indexView;

• View:

@ Html.DropDownListFor(x=>queryParam.PersonId,indexView.PersonList)

---

7. 異步提交表單時，要記得Ajax.BeginForm喲！

   做表單提交時，繞的小彎子：

• 剛開始想用@Html.BeginForm()+MVC3驗證來實現，可是想異步提示結果啊。
• 用Jquery中的.post方法提交，那就得把驗證加在客戶端腳本了。
• 后來突然想起了老被我遺忘了的Ajax.BeginForm()方法。實現了我的需求。(*^__^*) 嘻嘻……

@ using (Ajax.BeginForm( "Index", "Manage" , new AjaxOptions

{

    HttpMethod = "Post",

    OnSuccess = "Success",

    OnFailure = "Failure"

}))

    {

     @Html.ValidationSummary(true)

     @ Html.TextBoxFor(model => model.Name, new { @style = "width:300px" })

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

    }

////腳本提示執行結果

<script language="javascript" type ="text/javascript">

function Success() {

        alert( "修改成功" );

    }

function Failure() {

        alert( "修改失敗！" );

    }

</script>

其中還可以設置  UpdateTargetId屬性，執行結果后用來顯示執行結果。

重要的一點是要添加

<script src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js" )" type="text/javascript"></script >

現在基本成功了。

 

8：關於Ajax.BeginForm亂碼的疑問

• 還有最后一個問題是產生了中文亂碼現象？用Html.BeginForm沒問題，用Ajax.BeginForm就會出現亂碼。（博問地址）

最后終於找到原因了：

view里面和web.config里的編碼有沖突了：

view：使用ajax.BeginForm需要添加該引用

      <script src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js" )" type="text/javascript"></script >

web.config: 網站編碼要求采用gb2312

    <globalization fileEncoding=" gb2312" requestEncoding =" gb2312" responseEncoding=" gb2312" culture =" zh-CN" />

還希望各位大牛能夠慷慨的提供一種比較好的解決方案，這里是測試項目。 【附件：中文亂碼demo】

 

對於這個問題，JohnnyYan給出了詳盡的回答，在此深表感謝

 

           在MVC  
          1,2版本中，他們使用自己的Ajax類庫來實現ajax請求，相應的js文件為MicrosoftAjax.js，MicrosoftMvcAjax.js 
          
但是程序員更喜歡jQuery，“write less,  
          do more ” 
          
后來微軟終於意識到開源的重要性，並且開始接受jQuery，在MVC3開始發布了jQuery.Ajax.Unotrusive JavaScript library（非介入式的javascript）。並且將jQuery作為默認的ajax框架。 
          
 
          
 
          
在web.config中增加client side validation and unobtrusive javascript 兩個配置 
          
<add key= 
          " 
          ClientValidationEnabled 
          " value= 
          " 
          true 
          " />  
          
<add key= 
          " 
          UnobtrusiveJavaScriptEnabled 
          " value= 
          " 
          true 
          " />  
          
客戶端驗證是基於jquery.validate.js和jquery.validate.unobtrusive.js的，當你在一個view中包含了這兩個文件時，你在Model中聲明的data annotation才會被解析。這時你打開你表單查看頁面的源代碼，可以看到相應的input fields都具有包含驗證規則的HTML5的data-*屬性，這些屬性將被Microsoft unobtrusive validation script讀取並配置jquery validate. 
          
 
          
unobtrusive javascript 是基於jQuery的，在使用AjaxHelper時（ActionLink 或者BeginForm），他會自動向你的控件中添加data-屬性（HTML5 屬性），這些屬性之后會被jquery.unobtrusive-ajax.js進行解析，所以要在頁面中引入該文件。 
          
例如： 
          
@Ajax.ActionLink( 
          " 
          UTC 
          ",  
          " 
          GetTime 
          ",  
          new { zone =  
          " 
          utc 
          " },  
          new AjaxOptions { UpdateTargetId =  
          " 
          myResults 
          " }) 
          
生成的代碼是： 
          
<a data-ajax= 
          " 
          true 
          " data-ajax-mode= 
          " 
          replace 
          " data-ajax-update= 
          " 
          #myResults 
          " href= 
          " 
          /Home/GetTime?zone=utc 
          ">UTC</a> 
          
jquery.unobtrusive-ajax.js作用就是解析data-ajax-mode等屬性，然后發出ajax請求的（可以看下這個文件的代碼），亂碼就是因為你沒有引入該文件 
          
 
          
如果不想使用jquery，改為false即可 
          
<add key= 
          " 
          UnobtrusiveJavaScriptEnabled 
          " value= 
          " 
          false 
          " />  
          
同時需要在頁面中引入MicrosoftAjax.js，MicrosoftMvcAjax.js