I have program in mvc which fetch data from controller and then display in view.It makes dynamic table with data in it. Inside it there is a link "SEE DETAILS", but instead of a single link i want to make whole table as a link like :
#Html.ActionLink("SEE DETAILS", "AppDetail", new { #id = item.id, appnameformp = item.AppNameForMP }, new { #style = "color:#C55000;font-size: 11px;text-decoration:none;" })
but i don't know how to do it...Any help is really appreciated and thanks in advance.
<div class="grid_9.5 alpha">
#foreach (var item in Model)
{
<div class="grid_4 alpha box_shadow" id="featured-subbillboard" style="margin-bottom:10px;" >
<table>
<tr >
<td><img height="140" width="130" src=#item.imgfile />
</td>
<td> </td>
<td class="table">
<h1 class="heading1" style="margin-top:10px; line-height: .4em;">#item.AppNameForMP </h1>
<h2 class="heading2">#item.DevName </h2>
<br />
<p class="para">
#if (item.AppDesc.Length > 50)
{#item.AppDesc.Remove(#item.AppDesc.Length -50)}
else
{ #item.AppDesc}
</p>
#Html.ActionLink("SEE DETAILS", "AppDetail", new { #id = item.id, appnameformp = item.AppNameForMP }, new { #style = "color:#C55000;font-size: 11px;text-decoration:none;" })
</td>
</tr>
</table>
</div>
}
</div>
Just use a regular anchor tag, and use #Url.Action() to get the href:
<a href="#Url.Action("AppDetail")">
<!-- table here -->
</a>
Also, note that while block-level links are now supported in HTML5, browser support and even implementation is not consistent. Some will handle linking the whole table well, while others will do all kinds of weird stuff. Just something to be aware of.
Related
I am trying to set up search box for bootgrid control, like it is shown in the example page here. Page navigation invokes the ajax call and the server method processing the ajax call receives the searchPhrase, but typing into the search box does not invoke the server method. Both the documentation and various Q&A did not have guidance, this is the closest question but did not address my issue.
I am doing this in ASP.NET MVC website, here is the relevant code fragment.
<div id="grid-command-buttons-header" class="bootgrid-header container-fluid">
<div class="row">
<div class="col-sm-12 actionBar">
<div class="search form-group">
<div class="input-group">
<span class="icon fa input-group-addon fa-search"></span>
<input type="text" class="search-field form-control" placeholder="Search">
</div>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-hover table-striped" id="redisKeyResults">
<thead>
<tr>
<th data-column-id="KeyName" data-formatter="link" data-type="string" data-order="desc" data-identifier="true">Key</th>
<th data-column-id="KeyName" data-formatter="commands">Flush</th>
</tr>
</thead>
</table>
Javascript code to setup bootgrid is as below
$("#redisKeyResults").bootgrid({
ajax: true,
url: "RedisCacheKeyManagement/GetRedisKeyResultGrid",
post: function() {
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
formatters: {
"commands": function(column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" +
row.KeyName +
"\">Flush</button>";
},
"link": function(column, row) {
return "<a class=\"link-get\" data-row-id=\"" + row.KeyName + "\" href=\"" + row.link + "\">" + row.KeyName + "</a>";
}
}
})
The answer to setting up search is to enable header navigation on bootgrid. General settings can be set using API on the table tag and column settings on th tag.
Based on the documentation guidance, setting data-navigation attribute on the table tag with the value 2 or 3 shows the search box with all the functionality.
<table class="table table-condensed table-hover table-striped" id="redisKeyResults" data-navigation="3">
Hope this helps someone facing the same issue.
I have this partial view that displays links to documents;
#model IList<DocumentLineViewModel>
<tr>
<td class="leftCell" style="width: 150px;">
<label>Documents</label></td>
<td class="rightCell" id="documentCell">
#if (Model.Any(x => x.CurrentUrlFlag))
{
foreach (var document in Model)
{
<a target="_blank" href="#document.CurrentUrl">
#document.CategoryName
</a>
}
}
else
{
<span>Not Entered</span>
}
</td>
</tr>
If the document is a pdf it works fine, I can view the document.
If the document is word (or excel) I get this unwelcome prompt;
How do I stop this?
EDIT
One way I tried was to embed the document in a popup but this did not work;
#model IList<DocumentLineViewModel>
<tr>
<td class="leftCell" style="width: 150px;">
<label>Documents</label></td>
<td class="rightCell" id="documentCell">
#if (Model.Any(x => x.CurrentUrlFlag))
{
foreach (var document in Model)
{
if (document.CurrentUrl.ToUpper().EndsWith("PDF"))
{
<a target="_blank" href="#document.CurrentUrl" class="btn">
#document.CategoryName
</a>
}
else
{
#document.CategoryName
<div class="modal fade" id="show-document" style="display: none">
<object src="#document.CurrentUrl"><embed src="#document.CurrentUrl"></embed></object>
#* <iframe src="#document.CurrentUrl"></iframe>*#
</div>
}
}
}
else
{
<span>Not Entered</span>
}
</td>
</tr>
The popup appeared, but the content did not show the document.
As #Sippy suggested, AFAIK there is no native support except PDFs offered by browsers to render documents.
If you can expose your documents for few converters available you may do that as shown in following links:
Google Docs Viewer
SO Post
Display word document on browser (Hope this may help you to an extent)
I have a form that has an input section at the top of the page and in the bottom half it displays a list of the objects that were added. I need to be able to Edit and Delete these objects and I'm not sure where to start or how to do it.
This code display the list of objects.
#if (Model.ListOfRecipients != null)
{
for (int i = 0; i < Model.ListOfRecipients.Count; i++)
{
<div class='recipient-wrapper'>
<div class='decision_block'>
<table class='recipient'>
<tr>
<td class='recipient-title'>
#Html.HiddenFor(model=>model.ListOfRecipients[i].RecipientId)
<h3>
#Html.DisplayTextFor(model => model.ListOfRecipients[i].RecipientName)
#Html.HiddenFor(model => model.ListOfRecipients[i].RecipientName)
</h3>
<div class='delivery-type'>
Delivery Type: #Html.DisplayTextFor(model => model.ListOfRecipients[i].DeliveryType)
#Html.HiddenFor(model => model.ListOfRecipients[i].DeliveryType)
</div>
</td>
<td class='na express'>
#Html.CheckBoxFor(model => model.ListOfRecipients[i].ExpressIndicator)
#Html.HiddenFor(model => model.ListOfRecipients[i].ExpressIndicator)
</td>
<td class='quantity'>
<h3>
Qty #Html.DisplayTextFor(model => model.ListOfRecipients[i].Quantity)
#Html.HiddenFor(model => model.ListOfRecipients[i].Quantity)
</h3>
</td>
<td class='action'>
<input class='button edit_recipient' type='button' value='Edit' />
<input class='button delete_recipient' type='button' value='Delete' />
</td>
</tr>
</table>
<input class='button update_recipient' type='button' value='Update' />
<a class='cancel_update' href='#'>Cancel</a>
</div>
</div>
</div>
}
}
You need to write Edit and Delete action methods in your controller and then set your two buttons to call the appropriate method.
The code for the action methods will depend on several factors that may to broad to address here.
Using Razor Syntax -- sorry the others were using wrong markup:(
<input class='button edit_recipient' type='button' value='Edit'
onclick="location.href='#Url.Action("Edit", "Controller", new { id = Model.Id } )'" />
You could create a delete controller and an edit controller and in the above view have a beside each one that has a delete and edit which recieves the objects id and each button goes to it's own view where they can edit or delete
1.I want to dynamically generate div containing textbox with unique id on click of button
<input id="<%:rid %>" type="button" value="reply"/>
2.I also want to use jquery ajax mathod to carry the textbox data to ashx file .
Can anyone help me
code
var lineItemCount = 0;
$(document).ready(function () {
$(".commentbox input[type='button']").click(function () {
var id = $(this).attr("id");
alert(id);
var cid = id.substring(5);
var containerid = "container" + cid;
alert(containerid);
//Increase the lineitemcount
lineItemCount++;
//Add a new lineitem to the container, pass the lineItemCount to makesure
getLineItem()
// can generate a unique lineItem with unique Textbox ids
$(containerid).append(getLineItem(lineItemCount));
});
});
//Create a new DIV with Textboxes
function getLineItem(number) {
var div = document.createElement('div');
//Give the div a unique id
div.setAttribute('id', 'lineitem_' + number);
//pass unique values to the getTextbox() function
var t1 = getTextbox('txt_' + number + '_1');
div.appendChild(t1);
return div;
}
//Create a textbox, make sure the id passed to this function is unique...
function getTextbox(id) {
var textbox = document.createElement('input');
textbox.setAttribute('id', id);
textbox.setAttribute('name', id);
return textbox;
}
iteration through model in aspx page
<%var i=1;%>
<%foreach (var commentitem in item.commentsModelList)
{
<table border="0" class="commentbox">
<tr>
<%var rid = "reply" + i;%>
<div id="<%:containerid %>">
<td> <input id="<%:rid %>" type="button" value="reply"/>
</div>
</td>
</tr>
</table>
<% i++;}%>
I changed your markup little bit to get the corresponding id of items on my click events
HTML
<table border="0" class="commentbox">
<tr>
<td>Some Item text
</td>
</tr>
<tr>
<td>
<div id="container-1" ></div>
<input type="button" class='btnReply' id="reply-1" value="Reply" />
</td>
</tr>
</table>
And the Script
$(function(){
$(".commentbox .btnReply").click(function(){
$(this).hide();
var id=$(this).attr("id").split("-")[1]
var strDiv="<input type='text' class='txtCmnt' id='txtReply-"+id+"' /> <input type='button' class='btnSave' value='Save' id='btnSave-"+id+"' /> ";
$("#container-"+id).html(strDiv);
});
$(".commentbox").on("click",".btnSave",function(){
var itemId=$(this).attr("id").split("-")[1]
var txt=$(this).parent().find(".txtCmnt").val();
$.post("/echo/json/", {reply: txt, id: itemId},function(data){
alert(data);
//do whatever with the response
})
});
});
Here is the jsfiddle example : http://jsfiddle.net/UGMkq/30/
You need to change the post target url to your relevant page which handles the ajax response.
EDIT : As per the comment about handing Multiple Divs
As long as you have the container div ids unique, it will work, I just changed the markup to include more than one item.
<table border="0" class="commentbox">
<tr>
<td>Some Item text<br/>
<div id="container-1" ></div>
<input type="button" class='btnReply' id="reply-1" value="Reply" />
</td>
</tr>
<tr>
<td>Some Another Content here <br/>
<div id="container-2" ></div>
<input type="button" class='btnReply' id="reply-2" value="Reply" />
</td>
</tr>
</table>
Here is the sample :http://jsfiddle.net/UGMkq/44/
For the above output to be rendered, you probably want to write your razor syntax like this
<table border="0" class="commentbox">
#foreach (var commentitem in item.commentsModelList)
{
<tr>
<td>Some Another Content here<br/>
<div id="container-#(commentitem.Id)" ></div>
<input type="button" class='btnReply' id="reply-#(commentitem.Id)" value="Reply" />
</td>
</tr>
}
</table>
Instead of creating a new table for each item, I created a new row in existing table.
i'm having a hard time dealing with MVC Ajax helper and trying to refresh certain part of the page. In my code, I have a situation like this:
<div id="ajaxLoadedContent">
<table>
<tr>
<th>
<%: Html.Label("ProductId") %>
</th>
<th>
<%: Html.Label("ProductName") %>
</th>
<th>
</th>
</tr>
<% foreach (var product in Model.Products)
{
%>
<tr>
<td>
<%: direccion.ProductId %>
</td>
<td>
<%: direccion.ProductName %>
</td>
<td>
<% using (Ajax.BeginForm("EditProduct", "MyController",
new { ContainerDiv = "ShowEditProducts" },
new AjaxOptions() { UpdateTargetId = "ShowEditProducts", OnSuccess = "updatePlaceholder" }))
{%>
<%: Html.Hidden("ProductId", product.ProductId)%>
<input type="submit" value="Edit" />
<%} %>
</td>
</tr>
<% } %>
</table>
<script type="text/javascript">
function updatePlaceholder(context) {
var html = context.get_data();
var placeholder = context.get_updateTarget();
$(placeholder).html(html);
return false;
}
</script>
<div id="ShowEditProducts"></div>
</div>
Now, when I press the Edit button, then the 'Editor View' appears, but the problem is that when i Submit that form, then there are two options:
The data is OK, the changes are made, the form dissapears and the list is refreshed.
The data is NOT OK, the forms stays and the validation messages appear.
The problem is that the UpdateTargetId are different for each option.
Option 1 refreshes "ShowEditProducts", while Option 2 refreshes "ajaxLoadedContent". Also, ehe 'Edit View' contains JavaScript that is executed when the view is loaded using the "Edit" button but is not executed when the form contains errors and is re-rendered.
The code of the EditView looks like this:
<% using (Ajax.BeginForm("SubmitEdit", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv}))
{%>
<script type="text/javascript">
// My JavaScript
</script>
<table>
<tr>
<td>
<%: Html.Label("Id")%></br>
<%: Html.TextBoxFor(x => x.Product.ProductId)%></br>
</td>
<td>
<%: Html.Label("Name")%></br>
<%: Html.TextBoxFor(x => x.Product.ProductName)%><
</td>
</tr>
</table>
<input type="submit" value="Save" />
<%: Ajax.ActionLink("Cancel", "EmptyView","Shared", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv})%>
<% } %>
So, now my two big problems are:
1. The JavaScript of the 'Edit View' don't get executed when the the view is re-renderd.
2. How can i update one target is there are errors and another one when there are not.
Thanks
The object being replaced is being set on this line:
var placeholder = context.get_updateTarget();
So instead, you should add a condition here. Eg, instead of returning HTML directly, if you return an object that looks like this:
public class Result
{
public bool Success { get; set; }
public string Html { get; set; }
}
Then you could do something like this:
var result = response.get_response().get_object();
if (result.Success)
$("#ShowEditProducts").html(html);
else
$("#ajaxLoadedContent").html(html);
Alternatively, instead of returning a Success boolean, you could have a property for the ID of the control to replace. This would be more reusable, and might make sense if you want the decision of which control to replace to be done server-side.