Edit:I have gone through many solutions posted on StackOverflow and various websites and then have come up with the compiled solution below. I have also changed the title of the question as the initial query was solved.
I am building a web app where in the goal is to update a model based on a dropdown in the main view and display the datatable in the model in a partial view. For portraying a more clear picture of the scenario, I am posting the code below:
Model Code
public class Reports
{
public DataTable dt2 { get; set; }
public void setdt2defvalue()
{
Relativity.API.IDBContext eddsDBContext = Relativity.CustomPages.ConnectionHelper.Helper().GetDBContext(-1);
string defaultvalue = "Select '' as [Test]";
dt2 = eddsDBContext.ExecuteSqlStatementAsDataTable(defaultvalue);
}
The DBcontext referred is for a third party application
Controller Code
[HttpPost]
public ActionResult ReviewerDashboardModel(int reviewerid)
{
Reports rev = new Reports();
try
{
Relativity.API.IDBContext eddsDBContext = Relativity.CustomPages.ConnectionHelper.Helper().GetDBContext(-1);
String sqlrev = "Select '" + reviewerid + "' as [Test]";
rev.dt2 = eddsDBContext.ExecuteSqlStatementAsDataTable(sqlrev);
}
catch (Exception ex)
{
}
return PartialView(rev);
}
public ActionResult Index4()
{
return View();
}
Main View (Index4.cshtml)
@model Reports
@using System.Data
@using ReviewerTest.Models;
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<select id="reviewer">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<div style="margin-top:50px">
Result:
<div id="partialplaceholder">
@Html.Partial("ReviewerDashboardModel")
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#reviewer').change(function () {
var url = "@Url.Action("ReviewerDashboardModel")";
var reviewerid = $(this).val();
if (reviewerid) {
reviewerid = reviewerid;
}
else {
reviewerid = 1;
}
$.post(url, { reviewerid: reviewerid }, function (data) {
$("#partialplaceholder").html(data);
});
});
});
</script>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
Partial View (ReviewerDashboardModel.cshtml)
@model Reports
@using ReviewerTest.Models;
@using System.Data
<div class=" row">
if (Model.dt2 != null)
@{
<table id="ReviewerView" style="margin-left:13px; margin-right:13px; overflow-y:auto">
<thead style="background-color:lightgrey">
<tr>
@foreach (System.Data.DataColumn col in Model.dt2.Columns)
{
<th>@col.Caption</th>
}
</tr>
</thead>
<tbody>
@foreach (System.Data.DataRow row in Model.dt2.Rows)
{
<tr>
@foreach (var cell in row.ItemArray)
{
if (cell != null)
{
<td>@cell.ToString()</td>
}
else
{
<td></td>
}
}
</tr>
}
</tbody>
</table>
}
else
{
<table style="margin-left:13px; margin-right:13px; overflow-y:auto">
<tr>
<th>Revier Name</th>
</tr>
<tr>
<td>Select the reviewer from the dropdown</td>
</tr>
</table>
}
</div>
First of all, I apologise for bombarding too much of code here but I wanted it to be over-inclusive so that I can eliminate all points of failure in this.
The main aim of this application is return a model containing the datatable and the datatable should get updated based on the user selection in the drop down in the main view. I am using a partial view to display that table.
The error that I am facing currently is that the partial view gives me an error stating
System.NullReferenceException: Object reference not set to an instance of an object.
at this line in partial view
if (Model.dt2 != null)
I am really confused as that is exactly what the condition is supposed to evaluate if the datatable is null or not. I am not able to work around this thing and would really appreciate any kind of help regarding this. Also, any suggestions on the code are welcome as I am a beginner in the .net development domain.
Note: I also tried using the get operator instead of the post operator in the ajax query just for testing it out. Using get, this error was not encountered and the else part of the partial view was getting displayed.