Solved

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

Posted on 2013-01-10
18
731 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
ID: 38766696
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
ID: 38767452
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
ID: 38768063
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:CSUGDEN
ID: 38768471
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
ID: 38768523
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
ID: 38768561
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
ID: 38768742
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
ID: 38768882
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
ID: 38774505
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
 

Author Comment

by:CSUGDEN
ID: 38776724
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
ID: 38776923
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
ID: 38776947
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
ID: 38779026
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
ID: 38781074
Does my call to actionlink look correct?
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 38783060
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
ID: 38785268
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
ID: 38787641
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
ID: 38796845
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

726 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