In my view I have a section
<div id="AssNameSection" style="display: none;">
<div id="AssNameSectionLoad"></div>
</div>
and there is a bit of jquery which shows and opens a partial view in that section when a check box is ticked.
...
$("#AssNameSectionLoad").load(newurl);
this all works. In the sub section that has been loaded is some row data with an action link and the row ID as the ID.
I'm trying to pass that ID of the row click to the main view for editing.
I figure out how to use the .click to capture an action link in another form/view/section.
Is this possible, can anyone point my in the right direction please?
EDIT more info
action link code in the partial view being rendered in the assnamesectionload div
<td class="ActionLinks">
#Html.ActionLink("Link Text", "ActionName",
new { controller = "MyController", id = item.id },
new { #class = "my-class" })
</td>
</tr>
}
</table>
html section
<div id="AssNameSection" style="">
<div id="AssNameSectionLoad">
<input name="__RequestVerificationToken" type="hidden" value="Zt9MlOm1zFuV_oAihoql_9aT-ch2fVkRs2oHodR1wCZkpMuhwLQHMS8_RTSRRcSCYBFlNa7psrVLu1-xhxAmc-jzhppX0UfbZ3gvzn62TQaJxtzpu4T_j3NtRXy2e6yH0"> <div>
<div>
<table class="table">
<tbody><tr>
<th>
Relationship
</th>
<th>
Associated Name
</th>
<th>
Options
</th>
</tr>
<input id="txtAssNameLineid" name="item.id" type="hidden" value="12157PAR121600"> <tr>
<td>
yyy
</td>
<td>
xxx
</td>
<td class="ActionLinks">
<a class="my-class" href="/MyController/ActionName/12157PAR121600">Link Text</a>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
jquery
<script>
$("a.my-class", "#AssNameSectionLoad").click(function (e) {
e.preventDefault();
console.log("a my-class has been clicked");
});
</script>
As long as you have an entrypoint for the jquery selector you can use the .click function.
Let's say there is a $('.clickable') withing the $("#AssNameSectionLoad") element (which you might generate in a partial view or whatever).
you can then use $('.clickable', '#AssNameSectionLoad').click(function(){...}) to handle behaviour.
The basic concept is that your jquery will look at the final html, not the html within the view where you've put it.
EDIT:
To select the id of the input element, you could use this jquery:
$("a.my-class", "#AssNameSectionLoad").click(function (e) {
e.preventDefault();
var id = $(this).parents('tr').prev('input').attr('id');
alert("a my-class has been clicked id="+id);
});
Here's a jsfiddle with the code.
Related
This is a C# MVC code wherein after searching the records from the database I am trying to display the records in each row (which is working). Each row consists of Update School button along with other details including the ChdId. After clicking this button my View should return schId (after selecting the school from the drop-down) and ChdId corresponding to that row. But after submitting the Update School of any row I am getting the ChdId of the first row always in my Controller (not of the row that I am updating).
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpPost]
public ActionResult UpdateSchool(int SchoolNames, int ChdId, Child model)
{
}
View:
#model Ass4Final.Models.Child
#{
ViewBag.Title = "Search";
var listOfSchoolNamesAndIds = ViewBag.SchoolNameAndId;
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="~/JS/Search.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h2>Search</h2>
<br /> <br />
<div>
<table class="table" id="myTable" style="width:100%">
<tr>
<th>
#Html.Label("Child ID")
</th>
<th>
#Html.Label("Child Name")
</th>
<th>
#Html.Label("DOB")
</th>
<th>
#Html.Label("School Name")
</th>
<th></th>
</tr>
#foreach (var item in Model.DataChdNamCurrSchDOBProp)
{
<tr>
<td>
#item.ChdId
</td>
<td>
#item.ChdName
</td>
<td>
#item.DOB
</td>
<td>
#item.School
</td>
<td>
<div data-role="main" class="ui-content">
Update School
<div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;">
#using (Html.BeginForm("UpdateSchool", "Home", FormMethod.Post))
{
<h3>Enter New School</h3>
#Html.DropDownList("SchoolNames", new SelectList(ViewBag.SchoolNameAndId, "schId", "schName"), "Select New School", new { #id = "MySearch" })
<input type="hidden" value="#item.ChdId" name="ChdId" />
<input type="submit" data-inline="true" value="UpdateSchool">
}
</div>
</div>
</td>
</tr>
}
</table>
</div>
</body>
</html>
My problem is that, the submit button is not working. As you can see, my partial view contains a jquery modal. If you click "mdlist" the modal will and appear with the submit button.
Can you please tell me whats the possible problem.
#model IEnumerable<MyApp.Models.Participant>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<a id="mdlist" class="button" href="#"><span class="new icon"></span>Add Participant</a>
<div id="dialog" class="content-wrapper">
<div class="buttons">
<input type="submit" name="submitButton" value="Save" class="button save icon" />
</div>
<table cellspacing="0">
<thead>
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<input type="checkbox" name="ParticipantCheck" id="#item.ID" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
</tbody>
}
</table>
</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
height: 400,
width: 670,
modal: true,
closeOnEscape: true,
resizeable: false
});
</script>
First of all you need to add Form (submit button works only if there was a form) by
#using(#Html.BeginForm()){
//place your html elements and submit button here
}
Next if you have an array the way you are adding checkboxes is incorrect take a look at this link
C#, MVC4
I have a PartialView created for a popup data entry on a form. This is a snippet from the main form.
<input type="button" id="btnAddGroup" value="Add Group" />
<p>
<input type="submit" value="Save" />
</p>
</div>
</fieldset> }
I discovered quickly that I needed to have the line:
#Html.Partial("_Groups")
Outside the primary view so the form submit button in the partial view would accept and process.
My controller processes and sends back the data using:
return PartialView(NewModel);
I can run the debugger and see that the data is getting passed back to the PartialView but since the view sits outside the original form, it's not displaying.
My PartialView is as follows:
#model OMD.ViewModels.SearchedUser
#if (Model.AddGroups != null)
{
<h2>Groups to be Added</h2>
<table id="AddGroupList">
<thead>
<tr>
<th>
Name
</th>
<th>
Until
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
#foreach (var Group in Model.AddGroups)
{
<tr>
<td>
#Html.DisplayFor(model=> Group.GroupName)
</td>
<td>
#Html.DisplayFor(model=> Group.dtAddedTo)
</td>
<td>
#Html.DisplayFor(model=> Group.bAddOrRemove)
</td>
<td>
#if (AuthCheck.CheckUser(new HttpContextWrapper(HttpContext.Current), oRoles.StaffChangeRequest) ||
AuthCheck.CheckUser(new HttpContextWrapper(HttpContext.Current), oRoles.StudentChangeRequest))
{
<span>#Html.ActionLink("Remove", "RemoveGroup", new { id = Group.ID })</span>
}
</td>
</tr>
}
</tbody>
</table>
}
<div id="dlgAddGroup" title="Add Group" style="display: none">
#using (Ajax.BeginForm("_Groups",new AjaxOptions { UpdateTargetId ="ID",OnSuccess="onSuccess"}))
{
#Html.DropDownListFor(model => model.AllGroups,new SelectList(Model.AllGroups, "ID","GroupName"), "Select Group to Add")
#Html.ValidationMessageFor(model => model.AllGroups)
<div class="editor-label">
#Html.CheckBox("cbxMakeGroupPermanent", true) Permanent
</div>
<div class="editor-label" id ="dlgUntil1">
Group Add Until:
</div>
<div class="editor-field" id="dlgUntil2">
#Html.TextBox("tbAddUntil",null,new { maxlength = 30, style = "width: 100px" })
<span style='padding:5px'><img id='calImageGroup' alt="img" src='~/Images/calendar.gif'></span>
</div>
<button class="btn btn-inverse" type="submit">add</button>
}
I can see the table at the top display the information posted back to it but it doesn't show on the screen...
How can I get this data/table to display?
Right now I have the following code:
#model IEnumerable<MvcAuction.Models.Furniture>
#{
ViewBag.Title = "Search";
}
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
</hgroup>
#using (Html.BeginForm("SearchIndex", "Furniture", FormMethod.Get))
{
<p>
Description: #Html.TextBox("SearchString")
<input type="submit" value="Search" /></p>
}
<table class="searchResults">
<tr>
<th>
#Html.DisplayNameFor(model => model.Description)  
</th>
<th>
#Html.DisplayNameFor(model => model.EndingDate)  
</th>
<th>
#Html.DisplayNameFor(model => model.Category)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndingDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Category)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
<button data-bind="click: toggleBidInput ">
<span data-bind="text: bidCancel"></span>
</button>
</td>
<td>
<input data-bind="visible: bidInputVisible" />
<button data-bind="visible: bidInputVisible">
Submit</button>
</td>
</tr>
}
</table>
#section Scripts{
#Scripts.Render("~/Scripts/knockout-2.1.0.js")
<script type="text/javascript">
function ViewModel() {
var self = this;
self.bidInputVisible = ko.observable(false);
self.bidCancel = ko.observable("Bid");
self.toggleBidInput = function () {
self.bidInputVisible(true);
self.bidCancel("Cancel");
};
}
ko.applyBindings(new ViewModel());
</script>
}
So with this code I have a "Bid" at the end of each row of the table.
When I click on it, it gets renamed to "Cancel" and a Text Input and another "Submit" Button appear next to it (in all rows).
I would like to separate each "Bid" button so when I click on it only THAT button in that particular row changes to cancel and only in that row the Text Input and "Submit" Button appear.
I can't seem to separate the effects of the button for each separate row.
KnockoutJS, by nature, is a "Client side library". I'm not sure if you can achieve what you expect by mixing the "client side code" with the "mvc4 server side code" like you mention.
Using KnockoutJS, when you bind a table's row (like for your example) to a list of items in a collection, the "click" commands become available to each items that it is bound to.
So, from what I can see in your example, I would do the following changes:
1) Put each Model.item in a collection within the ViewModel. ex: self.items = ko.observable([])
There are many ways to achieve this, but for the sake of this example, simply try this:
self.items = ko.observableArray([
{
itemDescription: 'desc 1',
itemEndingDate: '2012.01.01',
itemCategory: 'abc',
itemPrice : 123
},
{
itemDescription: 'desc 2',
itemEndingDate: '2012.01.02',
itemCategory: 'bcd',
itemPrice : 234
}
])
2) put the "toggleBidInput", "bidCancel" and "toggleBidInput" inside each items.
3) Bind the table's tbody to that collection. ex:
<tbody data-bind="foreach:items">..</tbody>
4) Bind the rows's cells to the proper items. ex:
<tr>
<td>
<span data-bind="text:itemDescription"></span>
</td>
<td>
<span data-bind="text:itemEndingDate"></span>
</td>...
When Knockout iterates through the items (the foreach..) the click button will be tied to the each item.
For point 1) (passing the data from the server to the client), there are many methods:
1) Use MVC's utility to generate JSON strings and put that string in a variable "model data". use this "model data" to create the items that will include the extra observables and functions.
2) use ajax to "fetch" data asynchronously. and populate the items from the values returned from the server. Web API is great for this actually. See John Papa's great article: http://www.johnpapa.net/2forfree/
Hope this helps.
My form isn't always submitted when I hit the submit button.
On my form I have one submit button. When I first hit the button, the form will submit. But when there's a validation error, the error is shown. But when I fix that error and press the submit button again, the form is not submitted. This will happen if you work with 'normal' speed; if you do everything very slow, then the form will submit.
In the 'normal speed' mode I see in FireBug that there's a request to the server, but my breakpoint in the code is never hit! So I keep on the same page and nothing happens. When I click multiple times (5-10) or I wait a few seconds and then click the submit button, the submit will reach my code.
I am using MVC4 with the .NET 4.5 framework.
I hope someone can help me with this..
EDIT:
This is the code I am talking about.
My html (with razor) code:
<div id="content" class="boxBorder">
<form method="post" action="/Import/ProcessStep" #(Model.UploadFiles ? "enctype=multipart/form-data" : "") id="wizardForm">
<table id="detailsTable" width="550" cellspacing="0" border="0">
<thead>
<tr>
<th class="first">Importwizard
</th>
</tr>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="ImportProgressBar">
<ul>
#foreach (var step in Model.StepNames)
{
<li>
<div class="WizardProgressStep">
<img src="#step.Value" class="ProgressStepImage" />
<br />
<span>#step.Key</span>
</div>
</li>
}
</ul>
</div>
<div id="StepTitle">
#Model.StepTitle
<hr />
</div>
<div id="StepContent">
#RenderBody()
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="WizardNavigationBox">
#if (Model.HasPreviousButton)
{
<input type="submit" name="PreviousStep" id="PreviousStep" value="Vorige" class="button icon add" />
}
#if (Model.HasNextButton)
{
<input type="submit" name="NextStep" id="NextStep" value="Volgende" class="button icon add saveButton" />
}
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
My controller:
[HttpPost]
public ActionResult ProcessStep(FormCollection formCollection)
{
WebMediator mediator = new WebMediator();
ViewResult newStep;
GenericWizardViewModel viewModel;
if (formCollection["NextStep"] != null)
{
ValidateStep(formCollection);
if (ModelState.IsValid)
{
mediator.ProcessStep(formCollection);
newStep = mediator.GetNextStep();
}
else
{
IWizardStep currentStep = mediator.GetCurrentStep();
viewModel = mediator.CreateViewModel(currentStep);
return this.RazorView(currentStep.StepName, viewModel);
}
}
else
{
newStep = mediator.GetPreviousStep();
}
viewModel = newStep.Model as GenericWizardViewModel;
return this.RazorView(newStep.ViewName, viewModel);
}
We finally figured it out.
All our controllers inherit from a custom BaseController class. This BaseController had an trribute with OutputCache on it with a duration set to 10 seconds. Removing this attribute fixed my problem.