• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 766
  • Last Modified:

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

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
CSUGDEN
Asked:
CSUGDEN
  • 9
  • 9
1 Solution
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
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
 
Bob LearnedCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
CSUGDENAuthor Commented:
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
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
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
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
Correct. When I execute the link I get a 'Page cannot be displayed' message from the browser
0
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
The 3 arg call would be for linktest,actionvaluies,routevalues no?

and I want the output to go into 'appcontent'
0
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
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
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
Does my call to actionlink look correct?
0
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
I am definitely new to this. Can you suggest how the view might be configured ?
0
 
Bob LearnedCommented:
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
 
CSUGDENAuthor Commented:
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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 9
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now