[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2013-01-10
18
Medium Priority
?
756 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
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.

 

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Suggested Courses

649 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