Still a little bit new to MVC but trying to setup a modal that receives dynamic data depending on where the table data is in the foreach loop.
We have a partial that we are using to generate our table code and are passing the viewmodel we need to this partial. Now within the partial we want the links on a certain column to display a modal corresponding to that row when you click on them. So basically hand off that row's model data and display the more detailed data in the modal. For example, here we are displaying the count of the companies effected but in the modal I want to be able to display the names of them. So I need to pass that on somehow.
Table Code :
#model IEnumerable<Tier2BugViewModel>
<table id="bug" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th></th>
<th data-class="expand">Bug</th>
<th data-hide="phone">Companies Effected</th>
</tr>
</thead>
<tbody>
#{
foreach (var row in Model)
{
<tr>
<td>
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#bugEditModal">
Edit
</a>
</td>
<td>#row.Bug.Bug</td>
<td>
<a href="#" data-toggle="modal" data-target="#companiesEffectedModal">
#row.CompaniesAffected.Count
</a>
</td>
</tr>
}
}
</tbody>
</table>
Modal Code :
<!-- Companies Effected Modal -->
<div class="modal fade" id="companiesEffectedModal" tabindex="-1" role="dialog" aria-labelledby="companiesEffectedModalLabel" aria-hidden="true">
#Html.Partial("_CompaniesEffectedModal")
</div><!-- /.modal -->
After some research it feels like we are going to need some sort of jQuery script to do this, but I can't put my finger on it or figure out if there is just an easier way to do this. I guess we will eventually be doing this for the Edit modal as well. Thanks in advance.
Related
I have a table which displays data from my database. I want to provide a button which will delete data from a table based on the row selected. Specifically based on the value of a specific cell of that table.
I've tried wrapping a button inside a form element as an extra element inside of each row, but this doesn't seem to work for 2 reasons. 1, it triggers the OnGet() function in my controller and 2 it doesn't seem to bind the cell data value to my 'SourceTable' property.
The following is my front-end table:
<table class="table">
<thead>
<tr>
<td>OrderIdentifier</td>
<td>Step Number</td>
<td>CreateDate</td>
<td>Step Status</td>
<td>Source Table</td>
</tr>
</thead>
#foreach (var order in Model.order.Steps)
{
<tr>
<td>#order.OrderIdenfitier</td>
<td>#order.Name</td>
<td>#order.CreateDate</td>
<td>#order.StepStatus</td>
<td>#order.SourceTable</td>
<td>
<a class="btn btn-dark"
asp-page="./OrderDetail"
asp-route-orderId="#order.OrderIdenfitier">
<i class="glyphicon glyphicon-zoom-in"></i>
Details
</a>
</td>
<td>
<form method="delete">
<input type="hidden" class="form-control" asp-for="SourceTable" />
<button type="submit" class="btn btn-dark">
<i class="glyphicon glyphicon-zoom-in"></i>
Delete
</button>
</form>
</td>
</tr>
}
And on the backend, I'd like to be passing in the SourceTable cell value of whatever row the button is clicked on into this function:
public IActionResult OnDelete(string SourceTable)
{
//Take SourceTable parameter, pass to data access layer, and delete from database.
return Page();
}
I would like to have the value of the SourceTable cell passed to my OnDelete function, but this doesn't occur. Additionally, my 'OnGet()' function is triggered when I click my delete button, not the 'OnDelete()' function. The I form I embedded the button in has action="delete", so I would think that it would go to the OnDelete() function, but that doesn't seem to be the case.
HTTP DELETE method is currently not supported by <form> element. That's why you hit OnGet() in your Razor page. You are still able to use OnPost() for that purpose with binding form values (e.g. hidden inputs) to action method parameters.
The second issue is with your asp-for input tag helper. By default it evaluates its expression against PageModel. You can use # to override that behaviour, especially when you're in a foreach loop. Your form then could look like this:
<form method="post">
<input type="hidden" asp-for="#order.SourceTable"/>
<input type="submit" vaue="Delete"/>
</form>
and action method:
public IActionResult OnPost(string SourceTable)
{
// delete record here
return RedirectToPage();
}
Maybe you don't like the idea to delete records in OnPost handler, which you would like to reserve for some other action.Then you can use named handler method like OnPostDelete(string SourceTable). All you have to do is to add attribute asp-page-handler="delete" to the <form> element:
<form asp-page-handler="delete" method="post">
<input type="hidden" asp-for="#order.SourceTable"/>
<input type="submit" value="Delete"/>
</form>
And maybe you don't like the idea of having a separate form for each row in the table. Then wrap the form around the table and use asp-route- prefix on each delete button to specify parameter binding:
<form method="post">
<table class="table">
<thead>
<!-- ... -->
</thead>
<tbody>
#foreach (var order in Model.order.Steps)
{
<tr>
<!-- ... -->
<td>
<input type="submit" value="delete" asp-page-handler="delete" asp-route-sourcetable="#order.SourceTable" />
</td>
</tr>
}
</tbody>
</table>
</form>
You can find more valuable information in artice Introduction to Razor Pages in ASP.NET Core.
I am not able to display the anchor tag inside the AngularJS expression. The problem is that when I am trying to display an anchor tag as an icon which is being fetched from the API, it's only displaying the raw path as
a href='../UserControls/DownloadRLCSFile.ashx?Path=\\dotnetdev\csv\RLCSDocuments\Registrations\ABACF\E.S.I.C. Registration\Sample.xlsx' target='_blank' download><i class='fa fa-download' style='font-size: 13pt;' ></i></a>
Please find the below code:
<div id="Div2" ng-controller="BasicRegulatoryDetail">
<h4 class="padder-sm b-b"><b>Regulatory Updates</b></h4>
<div>
<div class="table-responsive">
<table class="table table-striped bg-white ">
<tbody>
<tr ng-repeat="bs in BasicInfo" >
<td><asp:HyperLink ID="HyperLink1" NavigateUrl="~/RLCS_Connect/RegulatoryUpdateDetails.aspx?Subject={{bs.Subject}}" runat="server">{{bs.Subject}}</asp:HyperLink></td>
<td>{{bs.Document_Path}}</td> //here i am facing the problem
</tr>
</tbody>
</table>
</div>
</div>
</div>
Sounds like you might need ng-href:
https://docs.angularjs.org/api/ng/directive/ngHref
The wrong way to write it:
link1
The correct way to write it:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
I would like to create a program that gets data from the play.eslgaming.com website and puts this into a database.
I already found out that the data I need is just in the raw code of the webpages. Like following:
<div id="round-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<span class="teamstatus">Team: Evil Squirrels <small><i>(Attacker)</i></small></span>
<table class="wot_stats">
<tbody class="matchloser">
<tr>
<th>Tank</th>
<th>Player</th>
<th>Kills</th>
<th>Dmg dealt</th>
<th>Remain. HP</th>
<th>Blocked dmg</th>
<th>Time alive</th>
<th>Shots fired</th>
<th>Accuracy</th>
</tr>
<tr>
<td>
<div class="tank">
<img src="http://static-ptl-eu.gcdn.co/static/2.34.2/encyclopedia/tankopedia/vehicle/contour/ussr-object_140.png" class="icon-img">
<em>U.S.S.R. Object 140</em>
</div>
</td>
<td>
<div class="playername">
<a target="_blank" style="cursor: pointer;" href="/worldoftanks/europe/wot/open/bronze-series/player/7176461">conchita_</a>
<em>Conchita_</em>
</div>
</td>
<td>2</td>
<td>2781</td>
<td>Destroyed</td>
<td>240</td>
<td>07m 34s</td>
<td>18</td>
<td>50%</td>
And so on for each player each round 2 teams.
But the problem now is that I don't know how I get this information the easiest. As well I would like to put them into a database so I can make totals and monitor everything. I can program a bit C# so maybe there is a way to use this code.
I would like to know how I get the needed data from the webpages.
I would probably use the AngleSharp project to do the scraping: https://github.com/AngleSharp/AngleSharp
So I have a big form, which is divided in sections.
For simplyfying the thing, each section has input file tag for uploading a file, and an image of the previous file attached to that section (image in .png format).
<table>
<tr>
<td>
Upload Section Preview Image:
</td>
<td>
<div id="at-at-holder-N-TemplatePreview">
<input type="file" id="TemplateSectionPreview" name=#sectionScreenshotName title="Attach" />
</div>
</td>
</tr>
<tr>
<td>
<div class="section-panel">
<img class="thumbnail" src="/Content/screenshots/#sectionScreenshotName" />
<div id="section-image-preview-#sectionId" class="modal hide section-image-window">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<img src="/Content/screenshots/#sectionScreenshotName" style="max-height: 500px; padding: 4px;" />
</div>
</div>
</td>
</tr>
</table>
When I submit my form to save changes, in my controller I take a look at the Request.Files, and I find as many files as sections.
Digging more, I find out that MVC sends in every input I declare, the image I show next to it. Even if I attach a file with the input, nothing changes.
How can I just make my controller to read just the file/s attached with the input?
my controller heading:
[HttpPost]
public ActionResult QuestionEditor(FormCollection collection)
{
...
Here i am a dragging a table(1) row and dropping it in another table(2) using asp.net mvc similar to this one http://www.redips.net/javascript/drag-and-drop-table-row/ and the values are from database .It is working fine and what i need is the html table values (i.e the values inside the td) of the table(2).how can i get those values and save it in dataset in asp.net MVC.Here is my code
<div id="drag">
<table class="tbl1">
<tr>
<th colspan="2">
Table 1
</th>
</tr>
<% foreach (var item1 in Model)
{ %>
<tr class="rl">
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Id) %>
</div>
</td>
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Title) %>
</div>
</td>
</tr>
<% } %>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
<table id="tab" runat="server">
<tr>
<th colspan="2" class="mark">
Table 2
</th>
</tr>
<tr class="rd">
<td>
</td>
<td>
</td>
</tr>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
</div>
Any suggesion?I am new to MVC
Use jQuery ajax to save the data in server. You can make a call to a controller action from your jquery with your data and it can save the data to your tables.
var mydata=""; /// read your table cells values and store it in this string
$.post("yourcontroller/action/", { data : mydata} ,function(response){
//do something with the response from action
});
As Brian already suggested, traversing the DOM maybe a bad idea. A better way would be to store the table2 data in a javascript array (whenever a drop event occurs add to the array, or remove from the array when cells are dragged off the table). Then have an ajax call to submit the whole array in one go.
If I am understanding this correctly when the page loads you have the data for both tables in the database. You can just keep a working set of the changes being made to the table and update those records accordingly. Add logic to the "drop" event in your JS to store the item's ID and it's new position.
This saves you from having to update unaffected records and also from traversing the entirety of both tables on submit.