I have the following partial view:
<span>Login Status</span>
#{
if (ViewBag.UserId > 0)
{
#Html.ActionLink("Log Out", "LogOut", "Home", null);
}
else {
#Html.ActionLink("Log In", "Login", "Home", null);
}
}
It's just a pretend login status area. Now, the idea is to have this appear in master page for my MVC site, so that it appears on all pages. Here's how I'm rendering it in the _Layout.cshtml file:
<div id="login">
#{ Html.RenderPartial("LoginStatus"); }
</div>
What I'd like to have is, when the user clicks either the "Log In" or "Log Out" links, an action is performed (to log the user in/out) and then the partial view is refreshed - but the the rest of the page is left alone.
At the moment, when I click any of the links, the site navigates to "Home/Login" or "Home/Logout". I don't want it to render a view, I'd like to refresh just the partial view, regardless of which page I'm on.
What is the suggested way to do this?
Cheers.
Jas.
You could use AJAX. So you could use jquery to unobtrusively AJAXify those links by subscribing for their click event and sending an AJAX request to the corresponding controller action which would return the partial view and update the DOM.
Try the #Ajax.ActionLink() method.
Related
All,
I have an Html.Actionlink that calls a method in my controller and should return a partial view. My partial view is displayed within Index.cshtml, the partial view is _ServerStatusList.cshmtl.
View
#using (Html.BeginForm())
{
#Html.ActionLink("Start",
"StartServer",
null,
new { #class = "startButton" })
}
Controller
[HttpGet]
public PartialViewResult StartServer(Model model)
{
model.StartServer("server01");
return PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
}
Right now upon clicking the start button all of the functionality works correctly as far as starting the server goes, but it returns the incorrect view. After clicking I get redirected to localHost/home/StartServer and it says "running" (as a started server should say in my server list) on a blank page. Then if I manually navigate to my server status page via the address bar it shows the server is running (as it should say) in my _ServerStatusList.cshtml.
I used an Ajax ActionLink in another part of my project to click a button and return a partial view. I tried it for this button too using this code.
<input id="StartButton" type="image" value="submit" src="~/Images/start.png" alt="Start" height="25" />
#Ajax.ActionLink("Start", "StartServer",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CurrentView"
}
)
Clicking the button does not work but clicking on the word "start" does something similar to the Html.ActionLink. If I click the Start link it takes me to Index.cshtml, displays running in the area where the partial view should be, but does not load _ServersStatusList.cshtml. Again upon manual redirection everything is as it should be, running and correctly formatted.
How can I have the Ajax ActionLink use the image as the button, and upon clicking the image, return the correct partial view?
Thanks
MVC is smart enough to find the view you need, so change your return PartialView from:
PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
//To
PartialView("_ServerStatusList", model.Servers);
This should return the correct view :).
i wish to change the inner html of a view on button click but maintain the view. I know how to change the html content of a div in javascript, but how can I have the action of the button not return a different view?
My buton looks like
<input type="submit" value="submit" onchange="myfunc()"/>
where myfunc() is the function in Javascript changing the div content.
Assuming you want a link to render content using ajax (and hopefully using razor) you can do something like the following:
First, setup the action to render the content partially. this can be done a few ways, but I'll keep with the logic in the action (and make it callable directly or by ajax):
[HttpPost]
public ActionResult Save(SomeModel model)
{
/* build view */
return Request.IsAjaxRequest() ? PartialView(model) : Wiew(model);
}
Next, setup a container in your page where the content will be populated along with the form you're looking to submit. If you want the form to disappear on a save, wrap it in the container. Otherwise, keep the container separated. In the below example, the from will submit and on success it'll come back, otherwise the new content will appear in its place:
<div id="ajaxContentPlaceholder">
#using (Ajax.BeginForm("Save", new AjaxOptions { UpdateTargetId = "ajaxContentPlaceholder" })) {
<!-- form elements -->
<input type="submit" value="save" />
}
</div>
I have a view with including partial view (Partial view from different controller that call #{ Html.RenderAction("DebitHeadConfigure", "HeadDisplayConfigure");}) now i need a action against Button click which button come from partial view
Note : Currently if i use submit type button then it call my main controller action
Problem isn't in your button, but in the form that you are submitting. Make sure that you specify action and controller in a form within your partial view.
For example:
#using (Html.BeginForm("ActionToCall", "ControllerContainingAction", FormMethod.POST)) {
<p>
My Form
</p>
}
References:
http://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.108).aspx
http://msdn.microsoft.com/en-us/library/dd460344(v=vs.108).aspx
I have a button. After first click I am getting "Button pressed!" confirmation message. When I press button again I am getting confirmation twice. After third press, message appears four time. In fact I am getting geometric progression. Please help.
View is.
#{
ViewBag.Title = "Home";
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
}
<div id="buttonPressed">
#Ajax.ActionLink("Button", "Index", new AjaxOptions { Confirm = "Button pressed!", UpdateTargetId = "buttonPressed" })
</div>
Controller is.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
When the post comes back you are replacing the contents of the buttonPressed div which contains the button itself. Not a great thing to do.
In addition it is not proper to call back to the Index method which originally displayed the view. That will re-render the page along with the html in the div with an entire rerendering of the view (including all master page stuff), which will continue to happen over and over again.
You need to change the action callback to another action method in your controller, then return a partialView of some html or a string or something else.
I am having multiple dynamic buttons on my asp.net mvc 3 page. what is the best way to handle button click in asp.net mvc 3? there is no event handling in asp.net, so what is the best practice to hadle.?
You could handle the buttons clicks using javascript by subscribing to their click event. For example with jQuery you could give those buttons a class and then:
$(function() {
$('.someClass').click(function() {
// a button was clicked, this will point to the actual button
});
});
or if those are submit buttons of a form you could give them the same name and different values and then on the server test the value of the name parameter. It's value will equal to the button that was clicked.
Let's suppose for example that you have the following form with multiple submit buttons:
#using (Html.BeginForm())
{
... some input fields
<button type="submit" name="Button" value="delete">Delete data</button>
<button type="submit" name="Button" value="save">Save data</button>
}
Now inside the controller action you are posting to you could determine which button was clicked:
[HttpPost]
public ActionResult Index(MyViewModel model)
{
var button = Request["button"];
if (button == "save")
{
// the save button was clicked
}
else if (button == "delete")
{
// the delete button was clicked
}
...
}
If the buttons do not require the same form data, then you can create two forms with different action methods. This is the easiest solution.
If you need to use the same form data, then there are a number of methods, inclduing Darin and tvanfosson's approaches. There is also an approach based on attributes that will select the correct action method based on which button is clicked.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=724
Depends on what the buttons are doing. If they are logically separate actions, then you could have each postback to a separate action on the server side. This often also works they are variants of the same action, Save vs. Cancel, for instance where Save posts back the form and Cancel redirects to you the previous url (say, going back to details from edit). If the buttons represent different data that would get posted back to the same action, you can give them different values. If the buttons are named, the values will get posted back along with the rest of the form, assuming they are included in the form. If posting back from AJAX, you might need to explicitly serialize the button value along with the form.
Example of Save/Cancel
#using (Html.BeginForm())
{
//...
<button type="submit" class="submit-button button">Save</button>
#Html.ActionLink( "Cancel", "details", new { ID = Model.ID }, new { #class = "cancel-button button" } )
}
Then use CSS, perhaps in conjunction with jQuery UI to style the buttons.
<script type="text/javascript">
$(function() {
$('.button').button();
...
});
</script>