May 21, 2016, 11:04 AM
[CLOSED] How to Render Ext.NET controls on Bootstrap modal popup using PartialViewResult
Hello Team,
I am unable to render Ext.NET controls on partial view showing on bootstrap popup(modal) when called from following logic. The popup opens ok, but TextField does not get rendered and I see error in developer tools that Failed to load resource: the server responded with a status of 500 (Internal Server Error)
ContactViewModel.vb
ContactController.vb
View
Index.vbhtml
Partial View
_EditContact.vbhtml
I am unable to render Ext.NET controls on partial view showing on bootstrap popup(modal) when called from following logic. The popup opens ok, but TextField does not get rendered and I see error in developer tools that Failed to load resource: the server responded with a status of 500 (Internal Server Error)
ContactViewModel.vb
Imports System.ComponentModel.DataAnnotations
Public Class ContactViewModel
Public Property contact_id As Integer
Public Property last_name As String
Public Property first_name As String
Public Property FullName As String
Public Property title As String
Public Property company_name As String
<EmailAddress(ErrorMessage:="Invalid Email")>
Public Property email As String
Public Property phone As String
Public Property Cellphone As String
Public Property fax As String
Public Property address As String
Public Property city As String
Public Property state As String
Public Property zip As String
Public Property GetContactList As List(Of ContactViewModel)
Public Property AddContactSearchList As List(Of ContactViewModel)
Public Property PageFrom As String
Public Property ContactGridList As List(Of FillContactGridEntity)
End ClassContactController.vb
Imports System.Web.Mvc
Imports System.ComponentModel.DataAnnotations
Namespace Controllers
Public Class ContactController
Inherits Controller
Function GetContact() As ActionResult
Dim cViewModel As New ContactViewModel
cViewModel.ContactList = ContactConsumer.FillContactGrid(String.Empty,0)
Return View(cViewModel)
End Function
Function ContactDetail(Optional contactID As Integer = 0) As PartialViewResult
Dim cViewModel As New ContactViewModel
cViewModel.ContactGridList = ContactConsumer.FillContactGrid(contactID)
Return PartialView("_EditContact", cViewModel)
End Function
End Class
End NamespaceView
Index.vbhtml
<div>
@(Html.X().ResourceManager())
<!---------Grid Section Start---------->
<section Class="grid paddingTop10">
<div Class="row">
<fieldset>
<legend> Contacts Details</legend>
<div id="contactResultDiv">
@(Html.X().GridPanel() _
.Title("Contacts") _
.MaxWidth(900) _
.OverflowX(Overflow.Auto) _
.OverflowY(Overflow.Auto) _
.Height(450) _
.Store(Html.X().Store() _
.ID("Store2") _
.PageSize(100) _
.Model(Html.X().Model() _
.IDProperty("ID2") _
.Fields(
New ModelField("last_name", ModelFieldType.String),
New ModelField("contact_id", ModelFieldType.Int),
New ModelField("first_name", ModelFieldType.String),
New ModelField("title", ModelFieldType.String),
New ModelField("company_name", ModelFieldType.String),
New ModelField("email", ModelFieldType.String),
New ModelField("phone", ModelFieldType.Int),
New ModelField("Cellphone", ModelFieldType.Int),
New ModelField("fax", ModelFieldType.Int),
New ModelField("address", ModelFieldType.String),
New ModelField("city", ModelFieldType.String),
New ModelField("state", ModelFieldType.String),
New ModelField("zip", ModelFieldType.Int)
)
) _
.DataSource(Model.AddContactSearchList)
) _
.ColumnModel(
Html.X().Column().Text("Last Name").DataIndex("last_name") _
,
Html.X().Column().Text("First Name").DataIndex("first_name") _
,
Html.X().Column().Text("Title").DataIndex("title") _
,
Html.X().Column().Text("Company").DataIndex("company_name").Width(200) _
,
Html.X().Column().Text("Email").DataIndex("email") _
,
Html.X().Column().Text("Phone").DataIndex("phone") _
,
Html.X().Column().Text("Cell Phone").DataIndex("Cellphone") _
,
Html.X().Column().Text("Fax").DataIndex("fax") _
,
Html.X().Column().Text("Address").DataIndex("address") _
,
Html.X().Column().Text("City").DataIndex("city") _
,
Html.X().Column().Text("State").DataIndex("state") _
,
Html.X().Column().Text("Zip").DataIndex("zip")
) _
.SelectionModel(
Html.X().RowSelectionModel().Mode(SelectionMode.Multi)
) _
.Listeners(Sub(m) m.RowDblClick.Handler = "OpenContactPopup(record.data.contact_id);"))
</div>
</fieldset>
</div>
</section>
<!---------Grid Section End---------->
</div>
<div id = "myModal4" Class="modal fade" role="dialog">
</div>
<script>
function OpenContactPopup(contactID)
{
try {
var pageFrom = $('#PageFrom').val();
$.ajax({
type:"POST",
url: '@Url.Action("ContactDetail", "Contact")',
dataType: "text",
data: JSON.stringify({ contactID: contactID}),
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#myModal4').html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.textStatus + 'error');
}
});
} catch (e) {
alert(e.message + 'v');
}
}
</script>Partial View
_EditContact.vbhtml
@modeltype ContactViewModel
@Using (Html.BeginForm("SaveContacts", "Contact", FormMethod.Post, New With {.Id = "EditContact"}))
@(Html.X().ResourceManager())
'<!-- Modal content-->
@<div class="modal-dialog2" id="id1">
<div class="modal-content">
<div class="modal-header">
<Button type="button" Class="close" onclick="CancelSave()">×</Button>
<h4 class="modal-title">@(If(Model.contact_id = 0, "Add contact", "Edit Contact"))</h4>
</div>
<div class="modal-body">
<section class="free-form paddingTop10">
<div class="xopenLink">
<div class="form-inline width130">
<div class="form-group">
<label class="labelAlign">Last Name :</label>
@Html.X().TextField().ID("lastNameTxtBox")
</div>
<div class="form-group">
<label class="labelAlign"for ="first">First Name :</label>
@Html.TextBoxFor(Function(model) model.first_name, New With {.class = "form-control", .maxlength = 20, .id = "first_name_save"})
</div>
<div class="form-group">
<label class="labelAlign">Title :</label>
@Html.TextBoxFor(Function(model) model.title, New With {.class = "form-control", .maxlength = 20, .id = "title_save"})
</div>
<div class="form-group">
<label class="labelAlign">Company :</label>
@*@Html.TextBoxFor(Function(model) model.company_name, If(Model.company_name IsNot Nothing, Model.company_name, ""), New With {.Class = "form-control"})*@
@Html.TextBoxFor(Function(model) model.company_name, New With {.Class = "form-control", .id = "company_name_save"})
</div>
<div class="form-group">
<label class="labelAlign col-lg-5">Email :</label>
<div class="col-lg-7">
@Html.EditorFor(Function(model) model.email, New With {.Class = "form-control", .id = "email_save"})
@Html.ValidationMessageFor(Function(model) model.email)
@*<label><a href="mailto:@Model.email">@Model.email</a></label>*@
</div>
</div>
<div class="form-group">
<label class="labelAlign">Phone :</label>
@Html.TextBoxFor(Function(model) model.phone, New With {.class = "form-control Decimal", .id = "phone_save"})
</div>
<div class="form-group">
<label class="labelAlign">Fax :</label>
@Html.TextBoxFor(Function(model) model.fax, New With {.class = "form-control Decimal", .id = "fax_save"})
</div>
<div class="form-group">
<label class="labelAlign">Cell Phone :</label>
@Html.TextBoxFor(Function(model) model.Cellphone, New With {.class = "form-control Decimal", .id = "Cellphone_save"})
</div>
<div class="form-group">
<label class="labelAlign">Address :</label>
@Html.TextBoxFor(Function(model) model.address, New With {.class = "form-control", .id = "address_save"})
</div>
<div class="form-group">
<label class="labelAlign">City :</label>
@Html.TextBoxFor(Function(model) model.city, New With {.class = "form-control", .id = "city_save"})
</div>
<div class="form-group">
<label class="labelAlign">State :</label>
@Html.TextBoxFor(Function(model) model.state, New With {.class = "form-control", .id = "state_save"})
</div>
<div class="form-group">
<label class="labelAlign">Zip :</label>
@Html.TextBoxFor(Function(model) model.zip, New With {.class = "form-control Decimal", .id = "zip_save"})
</div>
@Html.HiddenFor(Function(model) model.contact_id)
</div>
</div>
</section>
<div Class="modal-footer">
<div Class="buttonDiv">
<div Class="buttonwrapper">
<input type="button" id="editBtnSave" Class="btn btn-default" value="@(If(Model.contact_id = 0, "Save", "Update"))" />
<button type = "button" Class="btn btn-default" onclick="CancelSave()" data-dismiss="" data-toggle="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
End Using
<script>
function closepopup() {
$("#id1").modal('hide');
$("#id1").remove();
}
$('#editBtnSave').on('click', function (event) {
try {
var a = {};
a.last_name = $('#last_name_save').val();
a.first_name = $('#first_name_save').val();
a.title = $('#title_save').val();
a.company_name = $('#company_name_save').val();
a.email = $('#email_save').val();
a.phone = $('#phone_save').val();
a.fax = $('#fax_save').val();
a.Cellphone = $('#Cellphone_save').val();
a.address = $('#address_save').val();
a.city = $('#city_save').val();
a.state = $('#state_save').val();
a.zip = $('#zip_save').val();
a.contact_id = $('#contact_id').val();
$.ajax({
type: "POST",
url: '@Url.Action("SaveContacts", "Contact")',
dataType: "text",
data: JSON.stringify({ cViewModel: a }),
contentType: "application/json; charset=utf-8",
success: function (data) {
alert('Data saved')
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.textStatus + 'error');
}
});
} catch (e) {
//alert(e.message + 'v');
}
});
function CancelSave() {
$('#myModal4').modal('hide');
}
</script>
