I am rendering out a ViewUserControl (.ascx file) in a view:
<% Html.RenderPartial("Comments", Model.Comments); %>
This ViewUserControl shows associated comments on an entry. I would like this control to render out a form as well, so users of my application can contribute.
How would you add a form to a ViewUserControl and handle it's postback?
Just add the form in there the same as you would on any page. In MVC, the form does not postback as such - it simply submits itself and its content (input controls) via HTTP Post to a URL.
Simply create an action in your controller (and hence a URL) which the form will post and do whatever activity is required there...
There is no postaback, like in standard asp.net, there can be only form tag that posts data to some url (controller/action).
Inside your partial user control, write:
<form action="controller/actionname" method="post">
<input type="text" name="inputText" />
<input type="submit" value="Post data to server" />
</form>
In MVC, only input type="submit" triggers form submit. In standard ASP.NET webforms, you can have many Linkbuttons, Buttons, ... but under cover, they all triggers this simple click on input type="submit" through javascript event. One form can post data to only one URL (controller/action), but that can be changed with javascript (as we can see in html source of 'old' asp.net webforms).
then, in controller you can handle post data:
[AcceptVerb(HttpVerb.Post)] // optionally
public ActionResult ActionName(string inputText) ...
Like others have answered already, you simply render a form and handle it's submit with an ActionResult.
For example, if your form (which could be rendered anywhere in your site) was submitting to http://www.yoururl.com/home/save, you would create an ActionResult method named save on the home controller to handle the submit (likely post/get method).
Related
I want to make an Ajax.BeginForm that will by default, go to the add user page. I also want in the same form an edit and delete button. The information in the form will be the same, I just need it to post to the different edit user and delete user URL.
How can I modify where the form will post, depending on what submit button is pressed, while keeping all the items that Ajax.BeginForm gives us.
Edit:
Also wanted to note that I want the URL to be generated by my routes. So in the same way the BeingForm uses the "action" and "controler" to make the path, I want to use that as well when I change the URL, so the URL is dynamic and not static.
I was able to get this to work by using jquery to change the action to the form using Url.Actions.
The HTML button:
<button type="submit" class="btn btn-danger" id="formDeleteButton" onclick="ChangeFormToDelete()">Delete</button>
The javascript/jQuery
function ChangeFormToDelete() {
$('#UserForm').attr('action', '#Url.Action("DeleteUser", "UserManagement")')
}
In #Url.Action the firstparameter is the action and the second is the controller. I made the exact same functions for edit and add and it worked perfectly.
I have an ASP.Net form which looks like the following when rendered (many lines of markup removed for brevity):
<form onsubmit="document.body.style.cursor='wait';showLoader();" action="mypage.aspx">
<!-- form elements and controls -->
<input type="submit" />
</form>
In mypage.aspx.cs's Page_Load I am doing:
if(Page.IsPostBack)
{
Foo();
} else {
Bar();
}
Quux();
Without modifying the HTML page using the Chrome Dev Tools, if I submit the form it executes Bar(). But If I removed or replaced the onsubmit attribute in the form with my own, ASP.Net thinks that the page is doing a post back and executes Foo().
I find this behavior weird because the inline JS code in onsubmit does not change anything related to the form submission. Its function is only to add a loading GIF while the form is reloading. Could there be something I am missing here?
Instead of adding a submit button, try adding a regular button, and call your gif functionality from it:
<input type="button" onclick="document.body.style.cursor='wait';showLoader();" value="Click Me" />
This will not post anything, which is what you want. <input type='submit'> will always cause a postback, unless you cancel it with JavaScript.
JSFiddle: http://jsfiddle.net/0gd8t7ew/
i have a list of thumbnails for the user can select one of the image.
onclick on the thumbnail open a larger image into a form.
What im trying to do now is send the id of the image selected to my controller.
Note: im using MVC 4.
how can i do that?
someone can help with this pls?
Thanks in advance:
Here is my code:
#foreach (var p in ViewBag.Images)
{
<li>
<a href="~/Files/#p.Name" onclick="swap(this); return false;">
<img src="~/Files/#p.Name"/>
</a>
</li>
}
when selected is going this img tag in my form:
<img id="main" src="" >
using this javascript for this event:
function swap(image) {
document.getElementById("main").src = image.href;
}
what i have to do now?
i trying with <input type="hidden" name="Img_Id" value="Viewbag.??????"/>
to pass this value to my controller??
First, some terminology help: You can't pass a value from the view to the controller action, the view is rendered after the controller action completes.
What you want to do is pass data from the client (web browser) to a controller action, using form fields.
In your javascript swap method, you could set the value of the Img_Id field to be the value for the selected image. When the form is submitted, the Img_Id will be posted as form data, and can be accepted as a parameter in the action.
You can use JQuery (or something else) to perform the client side actions.
Here's an example (not tested though!):
First add the ID as a data attribute on the element:
<a href="~/Files/#p.Name" data-id="#p.ID" onclick="swap(this); return false;">
Then some javascript to save that to form (using jquery here):
function swap(image) {
document.getElementById("main").src = image.href;
$("input[name='Img_Id']").val($(image).data("id"));
}
To pass a value back to your controller, you either need to submit a form, or else make an AJAX request to your controller.
In the first case, you'd need to update the value of your hidden field with javascript, and then either wait for the user to submit the form, or trigger a submit through javascript depending on what your needs are.
If you want to do an ajax request, it would be more or less the same thing, but you don't need a hidden field to store the value.
You could use jQuery in your swap function. See here for the official documentation.
If you chose to use this approach, and assuming you place your JavaScript in a separate file, then make sure you get the path for the action and controller and pass that in too.
var url = #Url.Action("Index","Home");
Therefore you may call: onclick="swap(this.id, url)"
Using ASP.NET, how do I make this button tag submit my ASP.NET form when clicked:
<button>Submit</button>
I'd like it to do a post back just like a regular asp.net server control button would work. I'd prefer a jquery way to do it if possible.
$('button').on('click', function(){
$(this).closest('form').submit();
});
On button click, it will find the closest form (which will be the parent) and submit it by passing the form to the action where you can access the values through your defined method; either get or post.
I think this is what you're asking.
You can either use:
<input type="Submit" />
Or using jQuery you can use:
$(function() {
$('button').on('click', function() {
$('form').submit();
});
});
you use javascript when you have links, or divs, or other elements that can not do post back.
In your case the <button>Submit</button> in html5 renders a submit button that if you click it, you just submit the form and that all you need.
The extra asp.net controls have some more functionality and communication with the code behind, but for the submit of the form, any submit button ether that one, ether the classic <input type="submit" value="Submit"> can do what you ask as they are.
Hi
i want to do a work in asp.net using mvc and ajax
i have a button
when i click that button,its text should be changed.e.g before click(Click me) after click(u clicked me)
but i want to do this work in MVC2
i have studied but couldn't understood mvc
kinfly do this example so that i can understand it easily
Best Regards:
Shaahan
are u just trying to change the text label on click?
there's a few ways to do this, but you can probably just use an onclick event and change the label straight when the user click on the button.
for example like so.
but if you want to do it MVC just for the heck of it, then you can create a view, click on the button and do a form post to the same page, and on the controller use ViewData["ButtonLabel"] and update the button label when the page goes back :P
You can do what you want simply with javascript. If you want to learn mvc here a simple [music store][1] tutorial that I has helped me a lot! [1]: http://www.asp.net/mvc/tutorials/mvc-music-store-part-1
MVC stands for Model, View, Controller.
The way this works is you have a controller, say HomeController which is a class derived from Controller. When you access /Home/ on the site through your browser it serves the browser a view and any additional information, often cookies and such. The model is the data and logic of the program, often handling things like databases.
There are multiple ways to go about this example.
//In HomeController class
public ActionResult Index()
{
return View();
}
public ActionResult Clicked()
{
return View()
}
And then for the Views for the index view you'd have a button which would link to /Home/Clicked. Then on the clicked view you'd have the button with changed text.
Of course this is only one way to do it you could just append a number do the /Home/ url and pass that to the view and if it's not 0 have the test be different or use javascript to change the button's text
Index view:
<form>
<input type="button" value="NClicked" onclick="window.location.href='/Home/Clicked'">
</form>
Clicked view:
<form>
<input type="button" value="Clicked" onclick="window.location.href='/Home/'">
</form>
Of course there's more to the views than that, but you can insert that into your body.