Mvc44 website creation tutorial Chapter 4 foreground section view 4.5, mvc44.5

Source: Internet
Author: User

Mvc44 website creation tutorial Chapter 4 foreground section view 4.5, mvc44.5

Iii. Topic
3.4 foreground topic browsing
On the front-end page of the website, you must display the root topic at the top. Click the topic name to enter the subtopic navigation page. The topic page must also contain the current path. Do this first
1) Root Column
Open [CategoryController] and add [PartialRoot] Action

/// <Summary> /// root topic /// </summary> /// <returns> </returns> public ActionResult PartialRoot () {return View (categoryRsy. root ());}

Right-click "add view model class" and select "Category". Select "List" for "Bracket template". Click "create branch view" and click "OK.
Delete other Code except the @ model IEnumerable <Ninesky. Models. Category> at the top. Manually write the code as follows:

@ Model IEnumerable <Ninesky. models. category> @ Html. actionLink ("Homepage", "Index", "Home") @ foreach (var item in Model) {@ Html. actionLink (item. name, "Index", "Category", new {id = item. categoryId}, null )}

2) subtopic navigation
Add [PartialChildren (int id)] Action in [CategoryController]

/// <Summary> /// subtopic /// </summary> /// <param name = "id"> topic id </param> /// <returns> </returns> public ActionResult PartialChildren (int id) {return View (categoryRsy. children (id ));}

Right-click to add a branch view

@model IEnumerable<Ninesky.Models.Category><ul> @foreach (var item in Model) {  <li>@Html.ActionLink(item.Name, "Index", "Category", new { id = item.CategoryId }, null)</li> }</ul>

3) path
Add [PartialPath (int id)] Action in [CategoryController]

/// <Summary> /// topic path /// </summary> /// <param name = "id"> current topic Id </param> /// <returns> </returns> public ActionResult PartialPath (int id) {List <Category> _ path = new List <Category> (); var _ category = categoryRsy. find (id); while (_ category! = Null) {_ path. Insert (0, _ category); _ category = categoryRsy. Find (_ category. ParentId);} return View (_ path );}

Right-click to add a branch view

@ Model IEnumerable <Ninesky. models. category> your current location: @ Html. actionLink ("Homepage", "Index", "Home") @ foreach (var item in Model) {@ Html. raw (">") @ Html. actionLink (item. name, "Index", "Category", new {id = item. categoryId}, null )}

Now you can see the effect.

Open Layout \ _ Layout. on the cshtml layout page, add @ Html to the top navigation bar <div class = "nav"> </div>. action ("PartialRoot", "Category ")

Open http: // localhost: 52270/Category/ManageAdd and add several topics.

 

Run the command to check the homepage of the website.

It worked!
Start Index page
Add [Index (int id)] Action in [CategoryController]

If the column Type is 2, the Navigation is redirected; otherwise, the CategoryView is returned.

/// <Summary> /// index /// </summary> /// <param name = "id"> topic id </param> /// <returns> </returns> public ActionResult Index (int id) {var _ category = categoryRsy. find (id); if (_ category = null) {Error _ e = new Error {Title = "Error", Details = "the specified column does not exist ", cause = "the topic you have accessed has been deleted", Solution = Server. urlEncode ("<li> Returns <a href = '" + Url. action ("Index", "Home") + "'> homepage </a> </li>")}; return RedirectToAction ("Error", "Prompt ", _ e);} if (_ category. type = 2) return Redirect (_ category. navigation); return View (_ category. categoryView, _ category );}

Add a strong view

@ Model Ninesky. Models. Category @ {ViewBag. Title = ""; Layout = "~ /Views/Layout/_ Layout. cshtml ";} <div class =" banner ">  </div> <div class =" left "> <div class =" children "> <dl> <dt> @ Model. name </dt> <dd> @ Html. action ("PartialChildren", "Category", new {id = Model. categoryId}) </dd> </dl> </div> <div class = "content_cnt"> <div class = "path"> @ Html. action ("PartialPath", "Category", new {id = Model. categoryId}) </div>

This is the default page of the topic.

Copy an Index. cshtml file named IndexSingle. cshtml as the view of the single-page column.

Copy Index. cshtml and name it IndexAbout. cshtml as a dedicated view about our topic, and modify the corresponding code.

@ Model Ninesky. Models. Category @ {ViewBag. Title = "About Us"; Layout = "~ /Views/Layout/_ Layout. cshtml ";} <div class =" banner ">  </div> <div class =" left "> <div class =" children "> <dl> <dt> @ Model. name </dt> <dd> @ Html. action ("PartialChildren", "Category", new {id = Model. categoryId}) </dd> </dl> </div> <div class = "content_cnt"> <div class = "path"> @ Html. action ("PartialPath", "Category", new {id = Model. categoryId}) </div> <div class = "singlepage"> <div class = "title"> @ Model. name About </div> <p> <B> NineSky </B>®It is a project of Dong Ting's learning Mvc. I want to complete a website to constantly urge myself, learn and practice. In the end, I hope to write a simple and easy-to-use website. </P> <p> Objective: To Learn mvc4 </p> <p> Objective: simple, easy to use, and practical </p> </div>

Open the "About Us" document page http: // localhost: 52270/Category/ManageDetails/6

Modify topic View

Run to see the effect

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.