Calling an Inline Function on a webform inside of mvc application - asp.net-mvc

I am trying to call a function inside of a ListView control Item Template. The function is adding a new row on the event of a group change.
<ItemTemplate>
<%# AddGroupingRowIfParentHasChanged() %>
<tr style="">
<td><asp:Label ID="ClauseLabel" runat="server" Text='<%# Eval("Clause") %>' /></td>
<td><asp:Label ID="ClauseNameLabel" runat="server" Text='<%# Eval("ClauseName") %>' /></td>
<td><asp:Label ID="SortOrderLabel" runat="server" Text='<%# Eval("SortOrder") %>' /></td>
<td><asp:LinkButton ID="btnDeleteClause" runat="server" CssClass="btn btn-sm btn-danger" CommandName="DeleteClause"><i class="fa fa-trash"></i></asp:LinkButton></td>
</tr>
</ItemTemplate>
I am using a webform that resides inside of an MVC application.
The page used to be apart of a webform application, but I am looking to move it into a new MVC application. Due to the overall complexity of the form, I want to avoid redeveloping it as mvc.
The issue is that I am unable to call AddGroupingRowIfParentHasChanged()
the Error that I am getting on this line is, The name 'AddGroupingRowIfParentHasChanged()' does not exist in the current context.
I cannot seem to find any resolution for this.

You should use #foreach for your data source, replace server control by razor syntax like this.
MVC view engine did not support <% %> in razor with version later than 1.0
#foreach(var item in datasource){
<tr style="">
<td><label>#item.Clause</label></td>
<td><label>#item.ClauseName</label></td>
<td><label>#item.SortOrder</label></td>
<td><button Id="btnDeleteClause" class="btn btn-sm btn-danger" ><i class="fa fa-trash"></i></button></td>
</tr>
}

Looks like it was an issue with Visual Studio, when I was copying over code. I commented those lines out, built the solution then re-added those lines and it worked.

Related

Pass one of many objects from view to controller

In an ASP.Net Core web app, I'm passing a List<Parameter> to a view via ViewBag.Parameters. The view also has a SelectParameterViewModel that consists of one property only, an int ParameterId. The objects are then displayed in a table like so (I skipped straight to tbody as the view works fine from a cosmetic perspective):
#model WebApp.Models.ReportViewModels.SelectParameterViewModel
[...]
<tbody>
#foreach (var item in ViewBag.Parameters)
{
<tr>
<td class="col-xs-1">
<form asp-controller="Report" asp-action="Launch">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="#Model.ParameterId" type="hidden" value="#item.Id" />
<input type="submit" class="btn btn-primary btn-sm" value="Select" />
</form>
</td>
<td class="col-xs-8">#item.Description</td>
<td class="col-xs-3">
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
</tr>
}
</tbody>
I would like the user to click on the button of the chosen table-row and submit either that row's Parameter (preferred) or the Parameter's Id, like I tried to do in this case. I would then do the same with the <a> tags on the third column. The point is that I don't want the user to simply type /Report/Launch/id and run the report, as each user would have its own sets of parameters and should not be allowed to use any of the others', and the ViewBag only contains the list of its Parameter. I can change the view model and/or the receiving controller's argument depending on the solution, both would work. I tried a few versions of the above html, but none would work, while the above returns ParameterId with value 0.
I couldn't find a similar scenario in other SO questions. There were some solutions that involved JavaScript and, correct me if I'm wrong, but that would still show the ParameterId value in the webpage source. While that would be sort-of-ok in this specific case, I have other cases where I definitely would not want that to happen.
What would be an elegant solution to achieve this? Thank you!

template navigation using Grails controllers

I am new to Grails and I am trying to get a template navigation bar to be populated dynamically through a controller. I am really close to solving this but seem to have run into a wall lately.
I currently am getting the navigation to populate only when I click on the link for that controller. Every where else the navigation just populates the bullet points for the links. I am probably not referencing the controller correctly in my template but have not found any good examples yet.
using Grails 2.3.3
the controllers are dynamic.
Here is the code for my navigation template
<body>
<!-- Links to the committees go here -->
<div class="leftMenu">
<!-- template of hospitals and there committees goes here -->
<div>
<g:render template="/hospital/committeeTemp" />
</div>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.events.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.news.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.help.gif" border="0">
</a>
</td>
</tr>
<%-- </table>--%>
</div>
</body>
I am using a nested loop to populate the navigation bar. That code can be found here Grails navigation links nested loop
With a little more knowledge under my belt. I found out that it was only populating on that one page because that is where it was accessing that particular controller's action. So I ended up putting that mapping into ever action in my controller.

How to implement this validation in a Knockout-based form?

I started to work on an ASP.NET MVC4 solution with the SPA template (Single Page Application).
The starting template manage some todo lists with a kind of post-it design.
I slightly modified the template this way:
no more post-it design for dislaying elements
but a table to list all elements + delete + edit button on each element
at the end of the table: an add button
I have now the ability to edit one element in a form tag like this:
<form data-bind="with: currentTodoList, validate: true">
<h1>Edition</h1>
<table>
<tr>
<td>ID</td>
<td><b data-bind="text: todoListId"></b></td>
</tr>
<tr>
<td>User ID:</td>
<td><input class="required" data-bind="value: userId" /></td>
</tr>
<tr>
<td>Title:</td>
<td><input class="required" data-bind="value: title" /></td>
</tr>
<tr>
<td>Category:</td>
<td><input data-bind="value: category" /></td>
</tr>
</table>
<p>
<button data-bind="click: $parent.saveTodoList">Save</button>
<button data-bind="visible: todoListId, click: $parent.deleteTodoList">Delete</button>
<button data-bind="click: $parent.showGrid">Cancel</button>
</p>
</form>
As you can see above, I set the validate data-binding on the form tag and I have some input element with the class required.
When I test this implementation it doesn't work as expected. Example:
If I clear (empty) the userId field (which is required) I have a red validation message (picture 1). OK.
If I fill this userId field again, the red validation messaged disappeared. OK.
Then if I clear (empty) the title field (which is also required) I have the red validation message next to the userId field (picture 2). NOK.
The inverse is also true: userId <--> title. Any idea where is the problem?
Here is a link to download my test VS2012 solution to reproduce the problem.
Ok, so I played with your markup a little, with slight modification to the view model (not using a list, but editing a single entry).
Take a look at this jsfiddle - http://jsfiddle.net/Zxjrb/1/
I have added a span for validation message for ID and User ID, skipped the span for Title and Category.
<span data-bind='visible: todoListId.hasError, text: todoListId.validationMessage'> </span>
You can see the messages coming up, when Id or UserId field being empty, and that not happening for the title/category fields.

Twitter bootstrap modal inside of dropdown

I'm using the twitter boot-strap library within groovy grails and can currently get both modals and dropdowns to work, but not one inside the other. Here's the code I'm writing, it's so close, when I click on something inside of the dropdown, a psuedo modal shows up, it turns the screen black (transparency included in modals) but doesn't display the box with the info I supplied. Also I've noticed upon further inspection with firebug that only the first set of modals are made but the rest aren't, I'm confused why this is the case. Can anyone help?
Code:
<table>
<thead>
<tr>
<g:sortableColumn property="name" title="${message(code: 'course.name.label', default: 'Name')}" />
<g:sortableColumn property="description" title="${message(code: 'course.description.label', default: 'Description')}" />
</tr>
</thead>
<tbody>
<g:each in="${courseInstanceList}" status="i" var="courseInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td>
<ul class="nav nav-pills">
<li class="dropdown" id="menu${courseInstance.id}">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu${courseInstance.id}">
${courseInstance.name}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<g:each in="${courseInstance.hasMany}" var="param">
<a data-toggle="modal", href="#myModal${courseInstance.id}${param.getProperties().key}", id="${courseInstance.id}${param.getProperties().key}">${param.getProperties().key}</a>
<div class="modal" id="myModal${courseInstance.id}${param.getProperties().key}">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Students in ${courseInstance.name}</h3>
</div>
<div class="modal-body">
<g:javascript>
$('#myModal${courseInstance.id}${param.getProperties().key}').modal({
keyboard: true
})
$('#myModal${courseInstance.id}${param.getProperties().key}').modal('hide')
</g:javascript>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</li>
</g:each>
</td>
<td>${fieldValue(bean: courseInstance, field: "description")}</td>
</tr>
</g:each>
</tbody>
</table>
There is a missing <li> element between the g:each and the a reference...but this should not be the point.
I'am using bootstrap with grails too, and I also use a modal within a navbar dropdown button, it works (but takes me several hours...).
I dont know for sure that it matters but i render the modal template outside of the dropdown. I also set the javascript to "modalize" the dialog below the modal div (not inside the modal-body).
Are you sure that everywhere the expression: myModal${courseInstance.id}${param.getProperties().key} is evaluated to same?
Also make sure that you dont import the modal.js manually (it is already imported in bootstrap.js). This caused some weird behaviour.
I'm using <div class="modal hide fade" id="..."> for the modal. This auto hides the div and adds some nice fade transitions (requires transitions.js).
Then the code reduces to: $('#...').modal({
keyboard: true,
show : false
})
Maybe some of these tips helps...
M.

ASP.net 4, MVC and scriptmanager syntax to use asp: ajax control toolkit elements

Context:
I am new to MVC asp.net Framework 4. In my application i wish to update a partial view upon a user click event (using an ActionResult). In index.aspx i use the standard Ajax.BeginForm containg a div in which i render the partial view (which calls the ActionResult):
*<%using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }))
{ %>
Name
<input id="txtName1" name="RoleName" type="text" value="" />
<br />
<br />
<div id="divToUpdate">
<%--render what you want to update here.. --%>
<%Html.RenderPartial("~/Views/Shared/SecurityMainPartialView.ascx", Model); %>
</div>
<br />
<input type="submit" id="btnSubmit" value="Search" />
<% }%>*
The updating of the partial view works. However:
The issue:
In the Site.Master i had the form tag, which i had to remove becuase the partial view would redirect the action link to Index instead of search. in removing this i can no longer use the asp:scriptmanager tag which is needed to use the asp.tab etc etc...
I get the following error: *Control 'ctl00_MainContent_ScriptManager1' of type 'ScriptManager' must be placed inside a form tag with runat=server.* error even on the ActionLinks in the site master.
Site master code:
*<body>
<%-- <form id="form1" runat="server">
--%> <div id="container">
<div id="header">
<h1 style="width: 1207px; margin-left: 0px">PROM (Promise Remote Order Management)</h1>
<div id="menubar">
**<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("Security", "SecurityMain", "Security")%></li>
<li style="width: 1208px; height: 0px"><%= Html.ActionLink("About", "About", "Home")%></li>**
</div>
</div>
<div id="content" style="height: 100%; width: 100%;">
<asp:ContentPlaceHolder ID="MainContent" runat="server" >
<p style="height: 132px; margin-top: 0px">
</p>
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>© footer stuff goes here!</p>
</div>
</div>
<%-- </form>--%>
</body>
</html>*
QUESTION:
How can i incorporate the use of scripts (ScriptManager) in my Asp.net MVC 4 app? Do i use MVC ScriptManager or something else? I know we are not supposed to use script manager in MVC as it breaks the rules...what is my alternative.
Thank you any help would be greatly appricitaed.
you shouldn't use web controls in asp.net mvc application. You can do it but I don't recommend. You can use some javascript libs like jQuery, Ext.Js etc... to do async operations in your View.
I like jQuery it's easy, fast to learn and develop and cross-browser (works in i.e., firefox, chrome, etc...) and I've been using it on my web apps with asp.net mvc and works very fine. Take a look at this link: http://api.jquery.com/jQuery.ajax/ it will show to you some operations with ajax (get/post calls, json result etc...) usign jquery lib.
jQuery comes in default template of asp.net mvc of visual studio, use it :)
Cheers!

Resources