與Ajax.ActionLinks MVC 4主題切換

這個問題的全文可與截圖here 與Ajax.ActionLinks MVC 4主題切換

感謝您的幫助 - 原帖如下：

於是我下載了MvcMusicStore併發射了完成項目。我閱讀所有關於擴展視圖引擎和使用jquery插件的文章，但我想相信這可能比僅僅在鏈接被點擊時更改CSS文件路徑更簡單。主要是因爲我不想複製我沒有完全理解的逐字代碼。我對MVC很陌生。

所以這是我做過什麼：

要HomeController.cs我說：

public ActionResult Theme(string themeName) 
    { 
     ViewBag.Theme = ThemeModel.GetSetThemeCookie(themeName); 
     return View(); 
    }

到模型我說這個類：

public class ThemeModel 
{ 
    public static string GetSetThemeCookie(string theme) 
    { 
     HttpCookie cookie = HttpContext.Current.Request.Cookies.Get("userTheme"); 
     string rv = "Blue"; 
     if (theme != null) 
      rv = theme; 
     else 
     { 
      if (cookie != null) 
       rv = cookie["themeName"]; 
      else 
       rv = "Blue"; 
     } 

     cookie = new HttpCookie("userTheme"); 
     HttpContext.Current.Response.Cookies.Remove("userTheme"); 
     cookie.Expires = DateTime.Now.AddYears(100); 
     cookie["themeName"] = rv; 
     HttpContext.Current.Response.SetCookie(cookie); 
     return rv; 

    } 
}

我然後創建網站的2份.css，只更改背景顏色和font-family以及一個視圖來生成我的鏈接標記。

<link href="@Url.Content(string.Format("~/Content/{0}.css", ViewBag.Theme))" rel="stylesheet" type="text/css" />

最後，我對這個_Layout.cshtml做了這些修改。

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    @if (ViewBag.Theme == null) {Html.RenderAction("Theme", "Home");} 

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" 
    type="text/javascript"></script> 
</head> 
<body> 
<div id="header"> 
    <h1><a href="/">ASP.NET MVC MUSIC STORE</a></h1> 
    <ul id="navlist"> 
     <li class="first"><a href="@Url.Content("~")" id="current">Home</a></li> 
     <li><a href="@Url.Content("~/Store/")">Store</a></li> 
     <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li> 
     <li><a href="@Url.Content("~/StoreManager/")">Admin</a></li> 
    </ul> 
</div> 

@{Html.RenderAction("GenreMenu", "Store");} 

<div id="main"> 
    @RenderBody() 
</div> 

<div id="footer"> 
    Themes: @Ajax.ActionLink("Coral", "Theme", "Home", new { themeName = "Coral" }, null, new { @style = "color : coral"}) 
     @Ajax.ActionLink("Blue", "Theme", "Home", new { themeName = "Blue" }, null, new { @style = "color : blue;"}) 

</div> 
</body> 
</html>

當我運行應用程序時，我得到了兩次呈現的總體佈局。一次只顯示左側的流派菜單，而沒有任何內容。然後再用前五張專輯。我無法發佈圖片，因爲我沒有足夠的代表。

當我點擊我的珊瑚和藍色鏈接時，我的主題發生了變化，我只得到了沒有前5張專輯的一套。

所以在這裏多一些閱讀後，我嘗試這樣做：

_Layout.cshtml：

@{Html.RenderAction("Theme", "Home");}

HomeController.cs

public ActionResult Theme(string themeName) 
    { 
     ViewBag.Theme = ThemeModel.GetSetThemeCookie(themeName); 
     return PartialView(); 
    }

但是，即使這將停止重複渲染，當我點擊主題鏈接，顏色發生變化，但我絕對沒有在網頁上看到其他內容。

嗯，真的是現在flummoxed，真的可以使用一些幫助。

乾杯， .pd。

來源

2013-12-09 twelveFunKeys

好的 - 這是我最終做到的。

創建一個JavaScript文件。我的叫做master.js：

function ajaxSuccSetTheme(theme) { 
    $('#linkTheme').attr('href', '/Content/' + theme + '.css'); 
}

修改_Layout。CSHTML：

@{ 
    if (ViewBag.Theme == null) { 
     ViewBag.Theme = MvcMusicStore.Models.ThemeModel.GetSetThemeCookie(); 
    } 
} 
<link id="linkTheme" href="@Url.Content(string.Format("~/Content/{0}.css", ViewBag.Theme))" rel="stylesheet" type="text/css" /> 

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

這一注：

第一次加載頁面的主題將不會被寫入ViewBag
給這個<link>標籤相同的ID在jQuery選擇您的js文件
將不顯眼的ajax jQuery文件更新爲與您的jQuery庫相同的版本。沒有它，你的Ajax.ActionLink將無法正常工作。

然後在_Layout.cshtml我的主題交換鏈接是這樣的：

<div id="footer"> 
    Themes : 
     @Ajax.ActionLink("Coral", "Theme", "Home", new { themeName = "Coral" }, 
      new AjaxOptions { HttpMethod = "POST", OnSuccess = string.Format("ajaxSuccSetTheme('{0}');", "Coral")}, 
      new { @style = "color : coral;" }) | 
     @Ajax.ActionLink("Blue", "Theme", "Home", new { themeName = "Blue" }, 
      new AjaxOptions { HttpMethod = "POST", OnSuccess = string.Format("ajaxSuccSetTheme('{0}');", "Blue")}, 
      new { @style = "color : blue;" }) 
</div>

注意事項是：

THEMENAME = 「不管」是參數傳送給控制器主題的方法。這將傳遞給主題模型中的Cookie方法
method = POST，所以IE不會緩存它，我讀過一些其他問題，通過不通過GET來解決
你必須克服自己的參數到的onSuccess JS回撥

下一步HomeController.cs改變：

public ActionResult Theme(string themeName) 
    { 
     ViewBag.Theme = ThemeModel.GetSetThemeCookie(themeName); 
     if (Request.IsAjaxRequest()) 
     { 
      return PartialView(); 
     } 
     else 
     { 
      return null; 
     } 
    }

老實說，如果你只是不檢查IsAjaxRequest()所有的Cuz我們從這個需要返回空不要緊被設置這個cookie讓你記住下一次logi的時候ñ。

剛剛離開的cookie設置方法在ThemeModel：

public class ThemeModel 
{ 
    public static string GetSetThemeCookie(string theme = null) 
    { 
     HttpCookie cookie = HttpContext.Current.Request.Cookies.Get("userTheme"); 
     string rv = "Blue"; 
     if (theme != null) 
      rv = theme; 
     else 
     { 
      if (cookie != null) 
       rv = cookie["themeName"]; 
      else 
      { 
       cookie = new HttpCookie("userTheme"); 
       rv = "Blue"; 
      } 
     } 

     cookie.Expires = DateTime.Now.AddYears(100); 
     cookie["themeName"] = rv; 
     HttpContext.Current.Response.SetCookie(cookie); 
     return rv; 

    } 
}

希望我幫助別人。如果你寧願做這一切在這裏的jQuery的Tim Vanfosson's Theme Manager jQuery Plugin

乾杯，

.PD。

來源

2013-12-10 17:36:47 twelveFunKeys

與Ajax.ActionLinks MVC 4主題切換

回答

相關問題