Here is some asp.net markup:
<tr style="display:none" id="AllInRateRow">
<td id="td6">
All-In Fixed Rate <span id="allInRateHelp" />
</td>
<td id="td7">
<%= Html.TextBoxFor(m => m.FixedRate, new { #class = "economicTextBox", propertyName = "FixedRate", dontRegisterNewIndication = true })%> %
</td>
</tr>
<tr style="display:none" id="ProfitRow">
<td id="td93">
Your Swap Profit
</td>
<td id="yourSwapProfit">
<%= Html.TextBoxFor(m => m.Fees.ProfitAmount, new { #class = "economicTextBox", propertyName = "Fees.ProfitAmount", dontRegisterNewIndication = true })%>
<%= Html.RadioButtonFor(m => m.Fees.ProfitType, (int)Chatham.Enumerations.IndicationProfitType.bps,
new { label = "bps", propertyName = "Fees.ProfitType", dontRegisterNewIndication = true })%>
bps
<%= Html.RadioButtonFor(m => m.Fees.ProfitType, (int)Chatham.Enumerations.IndicationProfitType.CurrencyAmount,
new { label = "$", propertyName = "Fees.ProfitType", dontRegisterNewIndication = true })%>
$
</td>
</tr>
I think it's a problem with the display property for CSS. It doesn't display them on page load which is the correct thing, but then the selection of this is supposed to change that:
<td id="td4">
Options <span id="solverHelper" />
</td>
<td id="solveType">
<%=Html.DropDownListFor(m => m.Fees.CalculationSource, DropDownData.SolverOptionsList(),
new { propertyName = "Fees.CalculationSource", dontRegisterNewIndication = true })%>
</td>
And those things happen through JQuery setting CSS and changing it like so:
var pricingOptions = $("#Fees_CalculationSource").val();
if(pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.AllInRate).ToString() %>)
{
$("#AllInRateRow").css("display", "none");
$("#ProfitRow").css("display", "table-row");
if(canExcludeFees) $("#IncludeFeesOption").css("display", "table-row");
else $("#IncludeFeesOption").css("display", "none");
}
else if (pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.Profit).ToString() %>)
{
$("#AllInRateRow").css("display", "table-row");
$("#ProfitRow").css("display", "none");
$("#IncludeFeesOption").css("display", "table-row");
if(canExcludeFees) $("#IncludeFeesOption").css("display", "table-row");
else $("#IncludeFeesOption").css("display", "none");
}
else if (pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.None).ToString() %>)
{
$("#AllInRateRow").css("display", "table-row");
$("#ProfitRow").css("display", "none");
$('input[propertyname=Fees.IncludeFeeIndicator]:eq(1)').attr('checked', 'checked');
$(
"#IncludeFeesOption").css("display", "none");
}
I think IE7 is unable to work with setting the CSS to the table-row property, but it does work with the 'none'.
Am I correct? And if I am, what would be a workaround?
If I recall correctly IE7 uses display:block. The easiest way to show the elements would be to just call the show/hide methods from jQuery instead of trying to control the display property yourself.
$("#AllInRateRow").show();
$("#ProfitRow").hide();
This will work in all browsers and you will not need to worry about browser specifics.
Related
I want to repeat a dropdownlist that is already bound using a Viewbag property and another textbox when a user click on Add Course.
I have used asp.net mvc and knockout.js based on a tutorial i saw, but the tutorial does not exactly handle using bound controls, please how can i achieve this using asp.net mvc and knockout.js.
Below is my code.
Thanks
<table id="jobsplits">
<thead>
<tr>
<th>#Html.DisplayNameFor(m => m.selectedCourse.FirstOrDefault().FK_CourseId)</th>
<th>#Html.DisplayNameFor(m => m.selectedCourse.FirstOrDefault().CourseUnit)</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: courses">
#for (int i = 0; i < Model.selectedCourse.Count; i++)
{
<tr>
<td>
#Html.DropDownListFor(model => model.selectedCourse[i].FK_CourseId, new SelectList(ViewBag.Course, "Value", "Text", Model.FK_CourseId), "Select Course", new { #class = "form-control", data_bind = "value: courses" })
</td>
<td>
#Html.TextBoxFor(model => model.selectedCourse[i].CourseUnit, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly", data_bind = "value: courseUnit" } })
</td>
<td>
<button type="button" data-bind="click: $root.removeCourse" class="btn delete">Delete</button>
</td>
</tr>
}
</tbody>
</table>
<div class="col-md-4">
<button data-bind="click: addCourse" type="button" class="btn">Add Course</button>
</div>
This is the script section
#section Scripts{
#Scripts.Render("~/bundles/knockout")
<script>
function CourseAdd(course, courseUnit) {
var self = this;
self.course = course;
self.courseUnit = courseUnit;
}
function CourseRegViewModel() {
var self = this;
self.addCourse = function () {
self.courses.push(new CourseAdd(self.course, self.courseUnit));
}
self.courses = ko.observableArray([
new CourseAdd(self.course, self.courseUnit)
]);
self.removeCourse = function (course) {
self.courses.remove(course)
}
}
ko.applyBindings(new CourseRegViewModel());
</script>
}
Edit:
i have been able to get this sample working from: http://learn.knockoutjs.com/#/?tutorial=collections
but it is only an hard-coded observableArray.
I want to be able to populate the select from the database. But it is not getting populated.
This is my sample code below:
<table id="jobsplits">
<thead>
<tr>
<th>Persenger Name</th>
<th>Meal</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: seats">
<tr>
<td>
<input data-bind="value: name" />
</td>
<td>
<select data-bind="options:coursesArray, optionsText:'Text', optionsValue:'Value', optionsCaption: 'Choose...'"></select>
</td>
<td>
<button type="button" data-bind="click: $root.removeSeat" class="btn delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<div class="col-md-4">
<button data-bind="click: addSeat">Add Seat</button>
</div>
This is the adjusted script section:
<script>
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
function ReservationsViewModel() {
var self = this;
//This is what i want to put in dropdown instead
self.thecourses.subscribe(function () {
getCourses();
});
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.thecourses),
new SeatReservation("Bert", self.thecourses)
]);
self.addSeat = function () {
self.seats.push(new SeatReservation("", self.availableMeals[0]));
}
self.removeSeat = function (seat) { self.seats.remove(seat) }
var getCourses = function () {
var collegeCode = $("#Colleges").val();
var departmentCode = $("#Departments").val();
var url = '#Url.Action("GetCourses", "Student")';
$.getJSON(url, { deptId: departmentCode, collegeId: collegeCode }, function (data) {
self.coursesArray(data)
});
}
}
ko.applyBindings(new ReservationsViewModel());
</script>
In the index.cshtml I display the todo items with partial view:
<table class="table table-striped">
#foreach (var todo in Model.Todos)
{
<tr id="#todo.TodoId">
#{Html.RenderPartial("_TodoModel", todo);}
</tr>
}
The partial view:
<td class="col-md-1">#Html.CheckBoxFor(m => m.Complete, new { #class = "bigCheckbox", id = "completedFlag"+Model.TodoId })</td>
<td class="col-md-9">
<span class="#(Model.Complete ? "completed" : "notCompleted")">
#Model.TodoText
</span>
</td>
<td class="col-md-2 text-center">
#Html.ActionLink("Remove Todo", "Remove", "Todo", new { todoId = Model.TodoId }, new { #class = "btn btn-sm btn-danger" })
</td>
When the checkbox is checked the javascript is calling the controller and updating the completed flag, then redirecting to Index page again. The reload happens, the new css class applied to the element, but the style remains the old one.
Even on soft refresh the new style is applied.
I can change the style with javascript, just curious about why is above behaviour?
Also I feel a bit cleaner if the model changes the style should also change.
I have a list object for which I tried to display text boxes in a foreach loop. However the post returns empty object. I couldn't see the cause.
Here is the code in the view
<%using (Html.BeginForm("makeTransfer", "shareTransfer")) { %>
<% foreach (var i in Model.Inform)//int i = 0; i < Model.Inform.Count(); i++){ %>
<%:Html.HiddenFor(x=>i.shares, new{#value = i.shares}) %>
...
<td style = "width:20px"><%:Html.TextBoxFor(x=>i.sharesRq)%></td> cuddling
<%} %>
<%:Html.HiddenFor(x => x.accSrc, new { #value = Model.accSrc })%>
<%:Html.HiddenFor(x=>x.accDst, new{ #value = Model.accDst}) %>
Date of Transfer<%:Html.TextBoxFor(x => x.date)%>
Transfer with benefit<%:Html.CheckBoxFor(x => x.withBenefit)%>
<input type="submit" name="save" value="Save" /></div>
<input type="submit" name="cancel" value="Cancel" /></div>
<%} %>
And Here is the controller
public ActionResult makeTransfer(vmTransfer transfer, string save, string cancel)
{
if (cancel != null)
return RedirectToAction("startTransfer");
else if (save != null)
{
foreach (var t in transfer.Inform)
{ ...
My problem is, transfer.Inform( 2nd line from the last) which is a list is empty when the form posts. Any help please, ASAP.
I would recommend you using editor templates instead of writing any loops in your views:
<% using (Html.BeginForm("makeTransfer", "shareTransfer")) { %>
<%= Html.EditorFor(x => x.Inform) %>
<%= Html.HiddenFor(x => x.accSrc, new { #value = Model.accSrc }) %>
<%= Html.HiddenFor(x => x.accDst, new { #value = Model.accDst }) %>
Date of Transfer <%= Html.TextBoxFor(x => x.date) %>
Transfer with benefit <%= Html.CheckBoxFor(x => x.withBenefit) %>
<input type="submit" name="save" value="Save" /></div>
<input type="submit" name="cancel" value="Cancel" /></div>
<% } %>
and in the corresponding editor template (~/Views/Shared/EditorTemplates/InformViewModel.ascx):
<%# Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.InformViewModel>"
%>
<%= Html.HiddenFor(x => x.shares) %>
...
<td style="width:20px">
<%= Html.TextBoxFor(x => x.sharesRq) %>
</td>
Remark: you might need to adjust the name of the editor template based on the type of the Inform property.
Editor templates will take care of generating proper id and names of the input fields so that everything binds correctly:
[HttpPost]
public ActionResult makeTransfer(vmTransfer transfer, string save, string cancel)
{
if (cancel != null)
{
return RedirectToAction("startTransfer");
}
else if (save != null)
{
foreach (var t in transfer.Inform)
{
...
}
}
...
}
I am trying to delete a record being displayed in a table on my ManageUser view using a sub-form, thus
<table cellpadding="2" cellspacing="0" border="1" summary="User Grid" style="text-align: left">
<tr style="background-color: #ABC3CB;">
<th align="center">User Name</th>
<th align="center">Approved</th>
<th align="center"> </th>
<th align="center"> </th>
</tr>
<% foreach(MembershipUser membershipUser in ViewData.Model) { %>
<tr>
<td><%: membershipUser.UserName %></td>
<td align="center"><%: Html.CheckBox(" ", true, membershipUser.IsApproved ) %></td>
<td align="center">
<% using (Html.BeginForm( "DeleteItem", "Admin", new { id = membershipUser.UserName } )) { %>
<input type="image" src="<%: Url.Content( "~/Content/Images/Delete.jpg" ) %>" />
<% } %>
</td>
</tr>
<% } %>
</table>
The ManageUser view is displayed by the following code in the AdminController, thus
public ViewResult ManageUser( string searchType, string searchInput )
{
List<SelectListItem> searchOptionList = new List<SelectListItem>()
{
new SelectListItem() {Value="UserName", Text = "UserName"},
new SelectListItem() {Value="Email", Text = "Email"},
};
ViewData["searchOptionList"] = new SelectList( searchOptionList, "Value", "Text", searchType ?? "UserName" );
ViewData["searchInput"] = searchInput ?? string.Empty;
ViewData["searchType"] = searchType;
MembershipUserCollection viewData;
if (String.IsNullOrEmpty( searchInput ))
viewData = Membership.GetAllUsers();
else if (searchType == "Email")
viewData = Membership.FindUsersByEmail( searchInput );
else
viewData = Membership.FindUsersByName( searchInput );
ViewData["PageTitle"] = "Account Management";
return View( viewData );
}
When I display the page, and select the Delete choice, I expect it to run Admin/DeleteItem in the AdminController, thus
public RedirectToRouteResult DeleteItem( string id )
{
Membership.DeleteUser( id );
return RedirectToAction( "ManageUser" );
}
but instead, it is returning directly to the Admin/ManagerUser view, thus displaying my original set of records again.
I have obviously missed something but I cannot see what. Anybody help?
HTML <form> elements cannot be nested. Nesting them results in unexpected behavior which could vary between different browsers. Quote from the specification:
Every form must be enclosed within a
FORM element. There can be several
forms in a single document, but the
FORM element can't be nested.
So you might need to remove the outer form or find another way of organizing your markup.
How to handle dynamically generated form submit in asp.net mvc?
Form is dynamically created (number, order and type of elements are always different) and i have to handle it (store the data in the database) in the Controller of asp.net mvc (there is no viewstate). Type of input can be everything; hidden fields, radio buttons, check boxes, text inputs etc..
<% using (Html.BeginForm("AddAnswer","Research")){ %>
<%= Html.Hidden("page", ViewData["curentPage"]) %>
<% foreach (var item in Model){ %>
<span><%= Html.Encode(item.Text) %></span>
<%= Html.ActionLink("Edit", "Edit", new {id=item.QuestionID}) %>
|
<%= Html.ActionLink("Details", "Details", new { id=item.QuestionID })%>
<%switch (item.QuestionTipe.QuestionTipeID){
case 4:%>
<table>
<%foreach (var offeredAnswer in item.OfferedAnswer) {%>
<tr>
<td><%= Html.CheckBox("q" + item.QuestionID, false, new{ value = offeredAnswer.Number})%></td>
<td><%= offeredAnswer.Text%></td>
</tr>
<%}%>
</table>
<% break;
case 1:%>
<table>
<% foreach (var offeredAnswer in item.OfferedAnswer) {%>
<tr>
<td><%= Html.RadioButton("q" + item.QuestionID, false, new{ value = offeredAnswer.Number})%></td>
<td><%= offeredAnswer.Text%></td>
</tr>
<%}%>
</table>
<% break;
case 2:%>
<div style="width:220px; height:20px; padding-top:10px; padding-left:8px;">
<%= Html.TextBox("q" + item.QuestionID, null, new { style = "width:200px;"})%>
</div>
<% break;
case 3:%>
<div style="width:220px;height:20px; padding-top:10px;padding-left:8px;">
<div id="q<%= item.QuestionID %>" style="width:200px;" class="slider">
</div>
<%= Html.Hidden("q" + item.QuestionID, 0)%>
</div>
<% break;
}%>
<%}%>
<p>
<input type="submit" value="Sljedeća strana" />
</p>
<%}%>
In your action method, you can access FormCollection parameter, from there, you can access all your passed in values from your submit action.
public ActionResult YourActionMethod(FormCollection form)
{
}
In order to best help you decide how to process the form, it may be helpful to have some additional information.
Something is making the decision to generate this form, what is doing that? What is it basing its rendering on?
Are there known variations of the form that can be accounted for, or are the elements truly independent of each other?
Are each of the elements themselves known? If so, is it possible to give them a consistent id/name so that they may be recognized on the server-side?
When you speak of "handling" the submission, what is the end goal that you'd like to achieve? For example, are you parsing the form to store in a database?
foreach (var key in form.AllKeys) {
var answers = form.GetValues(key);
if (answers.Count() > 1){
foreach (var value in answers)
{
...
}
}
else
{
...
}
}
This is very simple. I'm checking if there is multiple values for some of the answers in the form.