?
Solved

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

Posted on 2013-01-10
18
Medium Priority
?
745 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 1600 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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

777 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