Develop Reference

Capture URL from browser in ASP.Net MVC 5 in partial view

Ok, so I have an ASP.Net MVC 5 project. Each page can contain several "Widget" aka partial views. Now I have a button in one of the partial view and when that button is clicked I want to capture the browser URL. Here is my attempt:
Suppose I go to https://www.elloh.com/test below is the code behind.
Main Page
{
partial view one
{
// some razor code
}
partial view two
{
<div>#Request.Url.ToString()</div>
<div>#Request.Url.AbsoluteUri</div>
<button type="button" onclick="location.href='#Url.Action("Logoff", "Security")'"> LogOff</button>
}
}
Points: Now I some how want to pass the https://www.olleh.com/test when the LogOff button is clicked. I have https://www.olleh.com/test in the browser tab. I know I can pass the anonymous object. But All I get is the URL pertaining to logout partial view. So the div in the second partial view displays something like https://www.olleh.com/test/partialView2. So if I do something like below it will not work.
<button type="button" onclick="location.href='#Url.Action("Logoff",
"Security", new {id = #Request.Url.ToString()})'"> LogOff</button>
P.S: the code snippet is not correct syntax wise. Bear with me on this.
Expected output: Need to be able to capture Browser URL when button in partial view is clicked.

HttpContext.Current.Request.Url Or use Raw URL
https://msdn.microsoft.com/en-us/library/system.web.httprequest.rawurl.aspx

You can do it using HttpContext.Current.Request.UrlReferrer property.

How to redirect to a View of another Controller from one Controller's View in ASP.NET MVC 4 Web Application

I am creating a Login page, where there'll be two buttons. One is submit type 'Sign-in' button and other is a redirecting button 'Sign-up' which gets the URL of a view of another controller.
This login page (View) belongs to Login Controller and the redirecting button should access the MemberSignup View of the SignUp Controller.
<p>
<input type="button" value="Sign Up" class="btn" onclick= "document.location.href='SignUp/MemberSignUp'";/>
</p>
while running the above code it is executing with the URL: ~/Login/SignUp/MemberSignUp. Thus giving an error as the Login controller should not be included.

Another aproach if you don't want to rely on JavaScript for links on buttons, you can simply use an anchor and style it, making it look like a button, using css.
Your button text

Just add a "/" before your url to indicate that the path is absolute, not relative : document.location.href='/SignUp/MemberSignUp'
Or use the razor method to generate the url (best method) : #Url.Action("MemberSignup", "SignUp");

One method is just to point to the correct URL, example below;
<p>
<a href="/SignUp/MemberSignUp" >Sign Up</a>
<p>
or as mentioned below you can use an ActionResult.
However the issue you're having with your code is that you're missing the leading / from your redirect.

Add the following helper method to your view:
#Html.ActionLink("Your link text here", "MemberSignUp", "SignUp")
Moreover if you want some styling you can type:
#Html.ActionLink("Your link text here", "MemberSignUp", "SignUp", null, new{ #class="your-class" })

You can use as ActionLink as below:
#Html.ActionLink("Sign Up", "MemberSignUp", "SignUp", null, new { #class="your-class" } })

ASP.NET MVC 5 - "Create" view that can handle any number of elements for an IEnumerable based on clicking an "Add row" button?

I am writing a recipe manager for my wife in C#/.NET MVC 5. I'm getting to the page for creating a recipe, and I'm a little stumped. A recipe consists of a Name and a list of ingredients.
When I create a view, I have my form:
#using(Html.BeginForm()){
//Form elements
#Html.DisplayNameFor(x => Model.Name)
//button for adding a new ingredient to the recipe
<input type="submit" text="Submit New Recipe!" />
}
When the button for adding an ingredient is clicked, it should render a block of html inside the form just above the button itself, that way the user can add any number of ingredients and then submit the recipe back when the form is posted back to the controller.
For this functionality, should I make the button call a controller that sends back a partial view or something? I'm not sure how to accomplish this outside of JavaScript, but I'm wanting to use a .NET MVC solution if I can.

I try to minimize my reliance on javascript whenever I can, however I agree with #br4d that knockout is your best option here. If you want to avoid it at all cost, it will be more complex, slower and not as user friendly but here is how I would do it.
Enclose the form in a div. Have a place holder div inside the form to hold your ingredients list. Make the "Add new ingredient" call into a controller that will return a partial view with the required fields. In the target attribute indicate the place holder div as the update target and append the response to the html of the place holder div by specifying InsertionMode.InsertAfter.
<div id="parentDiv">
#Html.BeginForm........
#Ajax.ActionLink("Add New Ingredient","ActionName","ControllerName",routeValues,
new AjaxOptions
{
UpdateTargetId = "ChildDiv",
InsertionMode = InsertionMode.InsertAfter
}
<div id=ChildDiv>
</div>
</div>
This code is by no means comprehensive or production ready (I prefer to have a way of handling failed ajax calls and you might want to block off interactions until the call comes back just to mention two of the enhancements). Once again KnockOut would be the preferred way to do this.

Displaying blog categories in partial view on layout page

Currently I have a partial view where I manually display all my blog categories with links. I would like to make it dynamic by pulling from the database. I am not sure how to accomplish this within a partial view. I would even be willing to do it within the actual _layout page if it's easier that way.
Here is what I have right now.
_Categories.cshtml
<h2>Categories</h2>
<hr/>
<p>
ASP.Net MVC<br/>
Ruby on Rails<br/>
</p>
I would like to create these links dynamically as opposed to hard coding.
_Layout.cshtml
#Html.Partial("_Categories")
The main problem is there is no controller for the layout of a partial which is why I can't figure out how to go about it.
Thanks in advance for any help.

Create a controller action named ListCategories in BlogController (or in a new CategoryController). Add all the categories to the ViewBag in the action by querying them from your back-end database
public ActionResult ListCategories()
{
ViewBag.Categories = db.Categories;
}
And use a #foreach loop in the view for the action ListCategories.cshtml:
<h2>Categories</h2>
<hr/>
<p>
#foreach(Category c in ViewBag.Categories)
{
#c.Name<br/>
}
</p>
Finally, change your _Layout.cshtml to point to this action:
#Html.Action("ListCategories")
// or #Html.Action("ListCategories", "CategoryController")

Manage tabbed content with full support for routing

I'm building an Asp.net mvc 3 application. What I want to do, is a profile page (pretty mutch like the stackoverflow profile page), and the content of this page will be splited in tabs, each tab is represented by an PartialView.
When the user click on the tab X, I want to refresh only the tab area, without refreshing all my page. And in the same time changing my URL adress, so if the user click on the browser refresh button, it refresh the page with the selected tab. Is this possible ?
What I already know, is how to get data using AJAX, and replace the content of my view. I've read this post , I found it interesting, but it refresh all the page.
Thanks in advance.

You are on the right track. You will need to use both ajax to get the html to render without refreshing the page, as well as use push state to update the URL to include the current tab.
You could do these things as separate operations, but I would suggest using PJAX. With PJAX you will need a little additional logic in your server to decide whether to return the full html page with the layout, or just return the partial (a PJAX request).
Here is our Foo controller. Index has a default selected tab of "Bar". The Bar and Baz actions return the Index view, but with different tabs being the selected tab. If it is a PJAX request, then all we need is the partial view that fills in the tab content.
public class FooController : Controller
{
public ActionResult Index()
{
ViewBag.SelectedTab = "Bar";
return View();
}
public ActionResult Bar()
{
if(Request.Headers["X-PJAX"] != null)
return PartialView();
ViewBag.SelectedTab = "Bar";
return View("Index");
}
public ActionResult Baz()
{
if (Request.Headers["X-PJAX"] != null)
return PartialView();
ViewBag.SelectedTab = "Baz";
return View("Index");
}
}
Inside of the Foo/Index.cshtml we have the Razor code that will determine what partial view to render based on ViewBag.SelectedTab.
#{
ViewBag.Title = "Foo";
}
<h2>Foo</h2>
<ul>
<li><a class="tabs" href="#Url.Action("Bar", "Foo")">Bar</a></li>
<li><a class="tabs" href="#Url.Action("Baz", "Foo")">Baz</a></li>
</ul>
<div id="tab_content">
#if(ViewBag.SelectedTab == "Bar")
{
#Html.Partial("Bar")
}
#if (ViewBag.SelectedTab == "Baz")
{
#Html.Partial("Baz")
}
</div>
#section scripts
{
<script type="text/javascript">
$(function() {
$(".tabs").pjax("#tab_content");
})
</script>
}
The script section at the end is how you wire up PJAX. You are telling it, for all hyperlinks with the tabs class use pjax to dynamically load and render the html resulting from the href into the container with the id tab_content and update the url in the browser to be the url from the href.
Each tab's partial view is fairly simple in this scenario
Bar.cshtml
<p>This is the Bar tab. No pun intended.</p>
Baz.cshtml
<p>This is the baz tab.</p>
This is obviously a very simplified solution. You typically would want to use a presentation model to handle the logic of the view. Also, I have intentionally left out any tab styling to demonstrate that this technique can be used on any type of link. It is not limited to only tabs.
The full source code for this example can be on my GitHub site.

When the user click on the tab X, I want to refresh only the tab area, without refreshing all my page. And in the same time changing my URL adress, so if the user click on the browser refresh button, it refresh the page with the selected tab. Is this possible ?
To accomplish this you need to plug into browser's history API (and it's part of HTML5, and you'll have to use some kind of plugin to get the same thing in browsers that does not support it).
Manning's "HTML5 for .net developers" has pretty good section on that, but it's still in "early access".