Solved

How to use MVC4 ActionLink Fragment to direct controller output to a DIV

Posted on 2013-01-10
18
726 Views
Last Modified: 2013-01-19
I am VERY new to MVC and I have gotten past the simpler examples. Now I chose to convert an existing website that I have which used the legacy IFRAMEs in the typical header,menu, detail look into an MVC project using DIVs instead of IFRAMEs.

I have menu buttons in my header and an unordered list in my menu DIV. Using any of the buttons is supposed to direct the output to the 'detail' DIV.

I cannot get the results of my controller activations to be written to the detail DIV.
Is it possible to create this pattern using MVC? If so, How does the layout View have to be structured?
Code-for-LayoutView.log
0
Comment
Question by:CSUGDEN
  • 9
  • 9
18 Comments
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
I don't understand your question, "I cannot get the results of my controller activations to be written to the detail DIV.  Is it possible to create this pattern using MVC?"
0
 

Author Comment

by:CSUGDEN
Comment Utility
TheLearnedOne,

I want to know if I can direct my controller's output into a DIV. I tried the ActionLink fragment approach and was unsuccessful. The DIV is part of a page that is attempting to simulate an IFrame arrangement from an older web site of mine.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Are you asking about taking the ViewResult from a controller action, and render it into a <DIV>?

When you have something like an action, there is a call to a method, and when the method returns a ViewResult/ActionResult, that is rendered where ever the action is defined.

Example:

This link is defined in the header partial view:

            <li>@Html.ActionLink("Marketing Programs", "Index", "Shared")</li>

The corresponding controller action method:

  [NoCache]
        public ActionResult Index()
        {
            return View();
        }

The Razor engine selects the Index.cshtml to render.  The header is part of the shared layout view.
0
 

Author Comment

by:CSUGDEN
Comment Utility
Wow that explanation is above my head. Sorry I asked.
A but more detail regarding the ActionLink and the overloaded 'fragment' parameter would be a nice to have.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
To be more accurate, the ActionLink creates an anchor element that calls the action method on the controller.  In the example above, it would redirect to the Index view.

In your defense, I don't believe that is what you wanted.
0
 

Author Comment

by:CSUGDEN
Comment Utility
Well syntactically it didn't seem to work and I was really wondering why?
My statement

 <li>@Html.ActionLink("Test", "Details", "Home", Nothing, "_Layout", "appcontent", New With {.id = 1}, Nothing)</li>

didn't produce any result on the page.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Which overload for the Html.ActionLink method are you using?

Here is my guess:

LinkExtensions.ActionLink Method (HtmlHelper, String, String, String, String, String, String, RouteValueDictionary, IDictionary(Of String, Object))
http://msdn.microsoft.com/en-us/library/dd492938(v=vs.108).aspx
0
 

Author Comment

by:CSUGDEN
Comment Utility
Correct. When I execute the link I get a 'Page cannot be displayed' message from the browser
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
If that is the method that you are using, then the arguments are:

linkText, actionName, controllerName, protocol, hostName , fragment, routeValues,  RouteValueDictionary, and htmlAttributes.

There is a simple version, that would just use the linkText, actionName, and controllerName, since it doesn't look like you are needing the other arguments.

@Html.ActionLink("Test", "Details", "Home")

Open in new window


Then, you need to look at the Details action method in the HomeController class, to see what view is being rendered.  The default would be the Details view, since it assumes the same name as the method for the view.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:CSUGDEN
Comment Utility
The 3 arg call would be for linktest,actionvaluies,routevalues no?

and I want the output to go into 'appcontent'
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
No, that would be for text, action, and controller.  The action method would need to determine the view to render, and that view should render the necessary output into appcontent.
0
 

Author Comment

by:CSUGDEN
Comment Utility
That is why I was using this construct
li>@Html.ActionLink("Test", "Details", "Home", Nothing, "_Layout", "appcontent", New With {.id = 1}, Nothing)</li>

and trying to send the outputput of the actionlink to the div 'appcontent' so what do you think I am doing wrong?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
The view should determine how to render the output, and that is determined in the action method for the controller.

In the action method, there are different ways to get a view.  You can use the View() method to execute the same view name as the method, or specify the view name as a string argument to the View call.
0
 

Author Comment

by:CSUGDEN
Comment Utility
Does my call to actionlink look correct?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
No, I don't think that you understand the nature of MVC, as that form has these arguments:

linkText
actionName
controllerName
protocol
hostName
fragment
routeValues
htmlAttributes

None of these arguments will achieve what you need, because the rendering is determined by how you configure the view in the controller action method.
0
 

Author Comment

by:CSUGDEN
Comment Utility
I am definitely new to this. Can you suggest how the view might be configured ?
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 400 total points
Comment Utility
Simple C# example (since I don't use VB.NET with MVC):

View (Names.cshtml):

@Model ContentPage

<div id='content'>
     <ul>
     @foreach (string name in Model.NameList)
     {
        <li>@name</li>  
     }
     </ul>
</div>

Open in new window


ContentController.ShowNames method:

public ViewResult ShowNames()
{
    ContentPage page = new ContentPage();
    page.NameList.Add("Bob Jones");
    page.NameList.Add("Jim Davis");
    page.NameList.Add("Alex Duval");

    return View("Names");
}

Open in new window


Action Link:

<li>@Html.ActionLink("Show Names", "ShowNames", "Content")</li>

Open in new window


Since the name of the controller class is ContentController, then the naming convention is to add "Controller" to the "Content" name to get the class type "ContentController".
0
 

Author Closing Comment

by:CSUGDEN
Comment Utility
I get it now. Thanks for the perseverance with old dog who learns new tricks slowly if at all. My confusion was based on my desire to direct the output of the controlled into a specific area of the page/view based on some action that the user performed. I understand now that that the specific controller that I would call would have the information to load into that area of the page.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now