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)"
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 a little problem with binding <input> value into routing of the beginForm GET action when submitting.
Firstly, the relevant code :
[Route("Company/{companyID:int}/MarketOffers/{PagingParam.PageNumber=1}")]
public ActionResult MarketOffers(int companyID, PagingParam pagingParam)
* This is declaration of action that I am dealing with. PagingParam have property PageNumber of int type.
#using (Html.BeginForm(RouteDataHelper.ActionName, RouteDataHelper.ControllerName, FormMethod.Get, new { companyID = Model.Info.CompanyID }))
* In the BeginForm I am only using companyID because PageNumber will vary depending on what the user clicks on the website and because of that it's not supplied here.
<input id="PagingParam.PageNumber" name="PagingParam.PageNumber" type="hidden" value="1">
* This is input which value should be appended to URL. It's inside the form which generation code you see above. The value changes by javascript just before submitting the form.
When I input link like :
http://localhost:38120/Company/2037/MarketOffers/3
* Everything is ok. PagingParam.PageNumber sets its value to 3. This is desired behaviour.
But when I submit the form with PagingParam.PageNumber input field then my URL looks like :
http://localhost:38120/Company/2037/MarketOffers?PagingParam.PageNumber=2
Instead of
http://localhost:38120/Company/2037/MarketOffers/2
I exactly know that I could deal with that and change form action value using javascript+JQuery but I have a feeling that there is a way to do this automatically in MVC without writing JavaScript.
So the question is : Can I do something to automatically generate desired link when I am passing form which action is (for example) "/Company/2037/MarketOffers" and append PagingParam.PageNumber to generated URL without writing JavaScript?
All inputs inside a form that make a GET have their values added as query string parameters because a browser has no knowledge of the routes on your server.
Its not possible to generate ../Company/2037/MarketOffers/3 without using javascript to modify the action attribute of the form
say for instance I have the following button in a form in asp.net mvc 3 app:
<input type="submit" name="command" value="Click me" data-custom="D" />
I know how to get the value from the button.. however do I get the data-custom attr value in an action method? Thank you very much!!
Edit:
I should note that I'm not allowed to use javascript at all since this is a mobile version of the site for devices that do not support javascript..
however do I get the data-custom attr value in an action method?
No you don't. There is nothing in the HTML specification that indicates that data-* attributes should be sent to the server when submitting a form. So if you want to get that value you will need to use javascript. One technique consists in subscribing to the submit event of the form and then automatically injecting a hidden field into that form which will be populated from the data-* attribute of the submit button. This way the value will be sent to the server.
But since I suspect that what you are trying to achieve here is that you have multiple submit buttons and you want to know which button was clicked in your controller action. In this case you could use the following:
<button type="submit" name="btn" value="S">Save</button>
<button type="submit" name="btn" value="D">Delete</button>
...
and then have your controller action take an argument called btn.
But personally I prefer to use separate actions otherwise it makes the controller action very ugly since it will contain lots of if statements. Here's a nice blog post I would invite you to checkout.
A custom attribute is not passed through get or post; only values do.
You can grab the custom attribute value from client side (for example using jQuery .attr() function) and add it to your form data before submitting it.
as far as I know you can't get data directly from data-... . you can write javascript to get this value.
Only the value and the name of the form element are posted within a form and any data-* cannot be passed.
You can consider a workaround using JavaScript. The idea is to so somehow merge the data-custom value to your value attribute.
$("input[type=textbox][data-custom]").each(function(index, value) {
$(value).attr("value", $(value).attr("value") + "$$$" + $(value).attr("data-custom"));
});
And from your action method, use data.split("$$$")[1] to get data-custom.
Hope this helps
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.
If I have a textbox in my view:
<div><%= Html.TextBox("Comments", Model.Comments)%></div>
I want to post the contents of this textbox to the controller with an Ajax call. I only need this one value though, so I don't want to post the whole form back.
<%= Ajax.ActionLink("update", "UpdateComments",
new { comments = /* ????? */ },
new AjaxOptions { HttpMethod="POST" })%>
How do I get the textbox value?
Rather than writing server-side ajax code, you should use client-side Ajax (e.g. jQuery) to get the runtime value of the textbox and post that value.
using jQuery, you could retrieve the value in the following manner.
$("#Comments").val();
Ajax.ActionLink is a helper function, that generates a JS-enabled link, that sends data via AJAX. Because it is generated serverside, and the value is generated on the client side, you can not pass a single value like that. You either have to manually write HTML and JS, or submit a whole form containing this element (and watch out not to nest it inside another form).
You can use Ajax in jquery. Like this
function FunctionName() {
$.Post(URl, function(data) {
});
}