Suppose we have three hyperlink tag in asp.net mvc. Each of tag has an unique id attribute. How can I post value of id attribute of selected hyperlink to the controller?
Hyperlinks are like this :
A
B
C
The dialog just opens a form to upload an image and send the image to controller.
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
bgiframe: true,
height: 170,
modal: true,
autoOpen: false,
resizable: false
})
});
and calling controller method:
<div id="dialog" title="A" >
<% using (Html.BeginForm("myMethod", "Controller", new { #Id = Model.Id }, FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
<p><input type="file" id="fileUpload" name="fileUpload" style="width:23;"/> </p>
<p><input type="submit" value="B" /></p>
<% } %>
</div>
I'm not forced only to send Id. However I have to send a different parameter when different hyperlink is selected to determine which of them is selected.
do something like this
A
B
C
<script>
function click(a){
var $a = $(a);
//and do anything here
//access the id like
var id = $a.attr('id');
}
</script>
Related
I am new to Kendo and I am having a very hard time trying to do this. I followed this demo.
here and got it to work up the part that I wanted to have a text box and a send button in the window modal that the user would have to fill in and click send.
I am able to use Ajax to make the call to my controller but I can't get the information in the modal window to pass to the controller via FormCollection. Here's my window modal template:
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h5 data-idtest="1">#= Id #</h5>
<h2>#= TitleDisplay # - #= ArtistDisplay #</h2>
Input The Day:<input id="TheDayTextBox" name="TheDay" type="text" />
#using (Ajax.BeginForm("TheAction", "Search", new AjaxOptions { UpdateTargetId = "#=Id" }))
{
<button class="btn btn-inversea" title="Log outa" type="submit">Log Offsdfsaf</button>
}
</div>
Controller:
public ActionResult TheAction(string id, FormCollection form)
{
....
}
So how does Kendo pass data to controller inside a modal?
Try putting your input inside of the actual form:
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h5 data-idtest="1">#= Id #</h5>
<h2>#= TitleDisplay # - #= ArtistDisplay #</h2>
#using (Ajax.BeginForm("TheAction", "Search", new AjaxOptions { UpdateTargetId = "#=Id" }))
{
Input The Day:<input id="TheDayTextBox" name="TheDay" type="text" />
<button class="btn btn-inversea" title="Log outa" type="submit">Log Offsdfsaf</button>
}
I am very new to MVC and have Novice's knowledge about MVC.
I am creating an MVC application, where I have this page which displays Events taking place in a particular time.
Now when I select the event from the drop-down list, I get the specific event's details. Now along with that specific event's description, I need to get the feedback people has entered for that specific event.
Here is my View :
<div>Home >> Events</div>
<br />
<%:Html.LabelFor(m => m.Event)%>
<%:Html.DropDownListFor(m => m.Event.SelectedValue, Model.Event.GetSelectList(), new { id = "EventDropDown"})%>
<br /><br />
<div id="result" style="color: Green; border: 1px null transparent; ">
<%Html.RenderPartial("~/Views/PartialViews/EventsPartial.ascx"); %>
</div>
<%:Ajax.ActionLink("view", "viewFeedback", "Home", new AjaxOptions { UpdateTargetId = "comments" }, new {eventid=Model.Event.SelectedValue})%>
<div id="comments" style="color: Green; border: 1px null transparent;">
<%Html.RenderPartial("~/Views/PartialViews/FeedbackPartial.ascx"); %>
</div>
Can anyone please suggest how do I pass that event's ID in its ActionLink?
Thanks in advance
You can pass values with Html.ActionLink using routeValues in the parameter.
For example:
// VB
#Html.ActionLink("Link Text", "MyAction", New With {.eventId = 1})
// C#
#Html.ActionLink("Link Text", "MyAction", new {eventId = 1})
Might produce the link:
http://localhost/MyAction?eventId=1
u have to use ajax function for this:
$('youractionlinkid').click(function () {
var id = $('#yourdropdownid').val();
$.ajax({
url: this.href,
type: 'GET',
data: { id:id },
cache: false,
success: function (result) {
//do some action here
}
});
return false;
});
Razor will take AJAX this way also:
<div class="editorholder">
#Html.DropDownListFor(model => model.Display_ID, new SelectList(Model._listAllDisplayViewModel.ListAllDisplayInfo, "DisplayID", "DisplayName"), "Select.....", new { #class = "form-control", #id = "DisplayID", #onchange = "DisplayInfo();" })
</div>
<div class="editor-field">
<div id="DisplayView">
#Html.Partial("_DisplayView", Model._displayViewModel)
</div>
</div>
function DisplayInfo() {
$("#DisplayView").load('#(Url.Action("_DisplayView", "Display", null, Request.Url.Scheme))?id=' + $("#DisplayID").val());
};
I am trying to get the model data from a strongly typed view to a controller.
Using the submit button is ok, I can get the data. Now I want to achieve the same with html.actionlink.
This is what I have:
View:
#model WordAutomation.Models.Document
#{
ViewBag.Title = "Document";
}
<script type="text/javascript">
$(function () {
$("#dialog").dialog();
});
</script>
<h2>Document</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Document</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ClientTitle)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ClientTitle)
#Html.ValidationMessageFor(model => model.ClientTitle)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ClientFullName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ClientFullName)
#Html.ValidationMessageFor(model => model.ClientFullName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ClientCustomSSN)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ClientCustomSSN)
#Html.ValidationMessageFor(model => model.ClientCustomSSN)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Preview", "PreviewWordDocument", "Home", null, new { id = "previewLink" })
</div>
<div id="dialogcontainer">
<div id="dialogcontent"><input type="submit" value="Create" /> </div>
</div>
#section Scripts {
<script type="text/javascript">
$(document).ready(function() {
$("#dialogcontainer").dialog({
width: 400,
autoOpen:false,
resizable: false,
title: 'Test dialog',
open: function (event, ui) {
$("#dialogcontent").load("#Url.Action("PreviewWordDocument", "Home")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#previewLink").click(function(e) {
e.preventDefault();
$("#dialogcontainer").dialog('open');
});
});
</script>
}
Controller:
public ActionResult Document()
{
return View();
}
[HttpPost]
public ActionResult Document(WordAutomation.Models.Document model)
{
Models.Utility.EditWord word = new Models.Utility.EditWord();
word.EditWordDoc(model);
return View("Display", model);
}
public ActionResult PreviewWordDocument()
{
var image = Url.Content("~/Content/preview.jpeg");
return PartialView((object)image);
}
The document actionresult can get the model, but I want to know how can I get the values from the actionlink which will trigger the PreviewWordDocument action.
Thanks in advance, Laziale
The form can only be posted using the submit button to the URL given by its action attribute.
You can however send the form data to a different URL using the jQuery post method, manually validating the form before it is sent.
That way you can send the form data to the PreviewWordDocument controller method and handle the response in order to show the preview in the desired div.
(It will be helpful if you give an id to the form, so you can easily find it using jQuery)
So your click event handler for the preview link will look like this:
$("#previewLink").click(function(e) {
e.preventDefault();
if($("#YourFormId").valid()){
$("#dialogcontainer").dialog('open');
}
});
In the open function of the dialog you will post the form (which was already validated) to the preview controller method, using the jQuery ajax function. The response will be loaded into the dialogContent div:
$.ajax({
type: "POST",
url: $("#previewLink").attr("href"), //the preview controller method
data: $("#YourFormId").serialize(),
success: function (data) {
//load ajax response into the dialogContent div
$("#dialogcontent").html(data);
},
error: function(xhr, error) {
$("#YourFormId").prepend('<div id="ajaxErrors"></div>')
.html(xhr.responseText);
}
});
Now you will now be able to receive the whole document in the PreviewWordDocument action:
public ActionResult PreviewWordDocument(WordAutomation.Models.Document model)
{
var image = Url.Content("~/Content/preview.jpeg");
return PartialView((object)image);
}
in a HTML page when you click on a submit button all the input elements inside the form which the submit button resides in will posted to server, but when you click on a anchor (<a> tag ). you only send a request with a Get method and without posting any value.but if you want to send particular value to the server with this approach you can do it by query string.you have used following to make a request :
#Html.ActionLink("Preview", "PreviewWordDocument", "Home", null,
new { id = "previewLink" })
this will produce :
<a id="previewLink" href="/Home/PreviewWordDocument"> Preview </a>
which is incorrect.to pass any value to the server with ActionLink use 4th parameter like this :
#Html.ActionLink("Preview", "PreviewWordDocument", "Home",
new { id = "previewLink" }, null)
the result from this code would be :
Preview
cheers!
I want to click the button on the "main view" and populate the partial view in its own . Updated
I have a main view:
#{
using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { #class = "form-horizontal" }))
{
<legend>Submit a Claim</legend>
#Html.EditorForModel()
<div class="controls">
<input id="btnCheckForClaims" type="submit" class="btn btn-primary" value="Submit Claim" />
</div>
}
I need to click the submit button then display this other view:
If I do below then on the page on the initial load it displays the div
<div id="update_panel">#Html.Partial("PastClaims")</div>
If I leave the div blank then I get a new partial view.
<div id="update_panel"></div>
if I leave them null like darrin suggested:
using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { #class = "form-horizontal" }))
I am redirected to the same page (what I want) but the additional partial view is not displayed.
Thanks to Darrin below to get me this far.
You could use an Ajax.BeginForm in this case:
#using (Ajax.BeginForm(null, null, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { #class = "form-horizontal"}))
{
#Html.EditorForModel()
<div class="controls">
<input id="btnOpenPartialView" type="submit" class="btn btn-primary" value="OpenPartialView" />
</div>
}
<div id="update_panel">
#Html.Partial("PartialView")
</div>
and then the corresponding controller action will return the partial view:
[HttpPost]
public ActionResult SomeAction()
{
// some processing ...
return PartialView("PartialView");
}
For Ajax.* helpers to work don't forget to include the jquery.unobtrusive-ajax.js script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#Html.Partial is server code, if you want load partial after submit, then try this:
$("form").on('submit', function(event){
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(r) {
$('#update_panel').html(r);
}
});
});
I have set up a form using TinyMCE in my MVC website. To do this, I have an ajaxForm in a partial view like this:
<% using (Ajax.BeginForm(
(Model.ViewMode == ViewMode.Insert) ? "Create" : "Edit",
new AjaxOptions()
{
UpdateTargetId = CustomerViewModel.WindowContentContainerId,
OnFailure = "addValidation"
//OnSuccess = "refresh"
}))
{%>
bla bla
<p>
<label for="CustomerBaneer">
Baner:</label>
<%= Html.TextArea(CustomerViewModel.FieldPrefix + "CustomerBaneer", Model.CustomerToEdit.CustomerBaneer)%>
<%= Html.ValidationMessage(CustomerViewModel.FieldPrefix + "CustomerBaneer", "*")%>
</p>
<input type="submit" value="Save" class="save" />
<%}%>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
}
</script>
The tinyMce component render well, and I can change my text in bold, underline, etc.. However, when I click on save, the request is send with the textarea content without its formatting (I have monitored it with firebug). Why? Is there any HTML stripping function enables by default with ajax form?
Thanks.
U need to save text from tinymce to that textArea before submit.
Function OnBegin is too late, so i did it this way:
function tinyToText() {
ed = tinyMCE.getInstanceById('yourId');
if (ed) {
$("#yourId").val(ed.getContent());
}
}
<input type="submit" value="Send" onclick="tinyToText();" />
It looks like you need to add an OnBegin handler to your AjaxOptions to call tinyMCE.triggerSave() before your form submits. I'm more familiar with jQuery, so you may have to fix up the syntax for the Ajax.BeginForm calls.
new AjaxOptions()
{
UpdateTargetId = CustomerViewModel.WindowContentContainerId,
OnFailure = "addValidation",
OnBegin = "preSubmit"
//OnSuccess = "refresh"
}
<script="text/javascript">
function preSubmit() {
tinyMCE.triggerSave();
}
</script>