PDA

View Full Version : [CLOSED] How to Render Ext.NET controls on Bootstrap modal popup using PartialViewResult



puns11
May 21, 2016, 12:04 PM
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


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 Class



ContactController.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 Namespace




View

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.Mu lti)
) _
.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()">&times;</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>

puns11
May 22, 2016, 12:50 PM
Setting initScriptMode="Inline" in web.config under tag <extnet> did work the charm for me. Now controls are getting rendered on partial view as well.

Now the concern is will this change in web.config affect application in other manners?

fabricio.murta
May 25, 2016, 5:17 PM
Hello!

Without trying your example, considering your second post, we don't expect using initScriptMode="Inline" should break anything. It is actually the original (and failsafe) approach of Ext.NET, as it injects scripts to the main page instead of creating a script reference to a temporary resource in ext.axd.

This thread suggests this problem may be a Microsoft limitation regarding sessions' state: [1.5] Error 500 on the major page include when InitScriptMode="linked" in the ResourceManager. (http://forums.ext.net/showthread.php?22474). By the time of this thread though, the setting for init script mode was 'inline' by default. It changed since Ext.NET 2 release and we have very very few reports on errors using this approach.

So while in most situations using InitScriptMode="linked" (current default) works, there are still some situations or project configuration mixups that may trigger this.

Long story short, you are safe using initScriptMode="inline". Notice: initScriptMode (first lowercase) is used in Web.config and InitScriptMode (first uppercase) used when you pass it as a parameter to Html.X().ResourceManager().

We'll still give your example a look and see if we can reproduce the issue locally, maybe there's a better approach to it.

mwiater
May 25, 2016, 5:21 PM
Hi Fabricio,

Using Inline mode does break things on the popup where we are rendering the controls. In my example, we are rendering GridPanel, and now column width expansion does not work, and sorting does not work as expected and many other javascript errors do come using inline, but when I use Linked mode the control does not even render. Please help!.

fabricio.murta
May 27, 2016, 1:28 AM
Hello Puneet!

Sorry for the delay, I'm afraid I don't have good news yet.

I am just trying to set up your sample code but I see several missing items like the EmailAddress and ContactConsumer entities, to name two.

In order to reproduce your problem in our end and effectively provide you with feedback (whether that is a bug, a misuse or whatnot) we really need a runnable example like the other time you provided us with.

You may find it easier to provide a set up project, some people even create the project and commit to a gitHub repository so we can just clone it, open and run. It is up to you to decide whether you provide a fully working sample with full definitions of model view and controller, or a project file.

Please note we don't want you to provide us with your production code, this would also be just misleading for us as well, the simpler the sample illustrating your issue, the faster we can understand and advise about how to proceed.

Please take this into consideration if you decide on sharing a project with the test case:
- never leave your Ext.NET key in the project's Web.config: nobody needs it to run the project from Visual Studio.
- do not add the Ext.NET DLL files -- specially if you are building Ext.NET yourself from sources
- let's use VS to our favor: remove/exclude any package directory from solution's packages/ folder, let Visual Studio's NuGet package-restore place the packages back in place on first build (remember to keep packages/repositories.config!).
- you probably can't upload your project file here -- but you can post a link to your oneDrive, dropbox, github or any other online file sharing mechanism available nowadays so we can get it.

We hope you understand, and we are looking forward for the runnable sample so we can help you making it work.

puns11
May 30, 2016, 9:48 PM
Hey Fabricio,


I spent some time to create exact example project that I am working and facing issues.

Here's the project link on dropbox from where you can download.

EDIT: Removed .zip file

This above project have package.config file which you can use to identify packages you need to download from Nuget.

Just to repeat the issue:

When you click on Edit Button on index display, you will get popup which is going to render Ext.NET gridpanel. Since I have set Inline mode, now it does render but

column does not sort correctly.
column width cannot be changed
There are many errors seen in developer tools console when clicked on column
when popup is closed, nothing on previous screen, where Edit button is placed, works either.



There is one more thing which I found. If I remove the Ext.NET Button from the display, instead put html input type=button and remove the Html.X().ResourceManager() call from _Layout then everything works normal. That means placement of resources conflicts in case of Inline, because partialView is rendered on same Index page inside <div> and Index page is already associated with Ext.NET resources, and when Partial comes in, it again calls the ResourceManager() and something went wrong.


I hope you guys will solve this problem.

Thanks,
Puneet

fabricio.murta
May 31, 2016, 3:52 AM
Hello! Awesome project sample!

I could see the problem happen... but I'd take a different approach there. Would use more Ext.NET than you are using.

Basically I'm going to rewrite your example based on this sample: Dynamic Partial Rendering - Window (http://mvc4.ext.net/#/Dynamic_Partial_Rendering/Window/)

But as I am not very keen on VB.NET I might take a little more time to readapt your sample to the approach used here.

Have you reviewed the above example before? Basically, instead of defining your modal on a plain div and jQuerying the partial view, use Ext.NET and a direct Event (bound to the button click) to show the window, and voila!

BUT, as the window in the example is very simple, it is possible that something else breaks in the process for your test case, so we have to get it working before we can say it works or not.

What would be left in the example is just passing the parameter to the directEvent. This is done via (in general lines, C#):



Html.X().Button().DirectEvents(de => {
de.Click.Url("Edit", "Home") @* actually, if it is in the same controller you won't need the ", "Home"" part *@
de.Click.ExtraParams.Add(new Ext.Net.Parameter("companyId", "2", ParameterMode.Raw));
})


And, well, this should just do. We'll see. An MVC example (in C#) using these direct event parameters is Dynamic Partial Rendering - Add Tab (http://mvc4.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/).

I am sure that, following the approach on these examples, the page will work. Sorry for not providing the full feedback yet, but these bits may help you progress more on your page and I felt like sharing already!

Hope this helps!

EDIT: By the way, for starters, this new approach might just work with any InitScriptMode setting. I'll start by the default (linked), and when it works, switch to inline and see what happens.

puns11
May 31, 2016, 12:05 PM
Using more Ext.NET is another option which require us to give more time, since we are already in the last sprint of our project and using full ext.NET will require us to input more time into project which is quite impossible right now. Our main idea is to add full featured controls of Ext.NET rather than full framework, so if you could help us render controls using our approach that will be great!!

On another note, the example you gave me to use, will work fine where i have to pass only bunch of parameters, but what about the cases where Action is expecting full model to be passed?

fabricio.murta
May 31, 2016, 9:33 PM
Hello Puneet!


On another note, the example you gave me to use, will work fine where i have to pass only bunch of parameters, but what about the cases where Action is expecting full model to be passed?

Should work just as same, although slower if the full model means more data through the client-to-server communication!

Daniil
Jun 01, 2016, 1:06 PM
Hello!

Personally, I would highly recommend to switch to the approach suggested by Fabricio as soon as possible.


Using more Ext.NET is another option which require us to give more time, since we are already in the last sprint of our project and using full ext.NET will require us to input more time into project which is quite impossible right now.

Yes, that is understandable and I'll try to help with this:


if you could help us render controls using our approach that will be great

In general, rendering Ext.NET Partial Views in such a manner is not supported, but I had some ideas to try and seems I was able to get your demo project working. I am not sure it is going to work in all scenarios, but if you are really running out of time, you could try.

To get your demo project working, please do the following:

1. Add this to _Layout.vbhtml. It prevents Ext.net.ResourceMgr.init to be executed twice.


<head>
... all the existing <head>'s stuff ...

<script>
Ext.net.ResourceMgr.init = Ext.Function.createInterceptor(Ext.net.ResourceMgr .init, function () {
if (this.initialized) {
console.log("return false");
return false; // prevents execution of original Ext.net.ResourceMgr.init
}

this.initialized = true;
});
</script>
</head>

2. Set up this ResourceManager in _CompanyDetail.vbhtml (but keep the position of the ResourceManager in the partial view). It ensures Ext.NET JavaScript and CSS resources and not loaded since they are already loaded with the main view.

@Html.X().ResourceManager().RenderScripts(False).R enderStyles(False)

3. In _CompanyDetail.vbhtml add this thing right at the top of ResourceManager. It helps with the scripts execution sequence.

@Html.X().ResourcePlaceHolder().Mode(ResourceMode. Script)

4. Set up ID for the top Panel. It helps with destroying Ext.NET components. If no unique ID then a new Panel component will be created each time you click the Edit button which can result in a memory leak. You should either care by your own about destroying Ext.NET components (component.destroy() call; just erasing HTML is not enough) or you can set up IDs for all top level Ext.NET components and they will be destroyed automatically if a component with the same ID is rendered.

Html.X().Panel.ID("Panel1")

5. Running $('#myModal2').html(data); before $('#myModal2').show(); results in a broken layout - zero Panel's height. You can either do

success: function (data) {
$('#myModal2').show();
$('#myModal2').html(data);
$("#myModal2").addClass("in");
}

or


success: function (data) {
$('#myModal2').html(data);
$('#myModal2').show();
$("#myModal2").addClass("in");
App.Panel1.updateLayout();
}

These steps are only required if a partial view is rendered in the way as you do it and to the parent view where Ext.NET is already presented.

And again, this helped with your demo project, but please know it is quite hacky and I cannot guarantee it is going to work in all the scenarios. I can be only used as an attempt to get it working in the lack of time condition. Eventually, it should be changed to another approach.

puns11
Jun 01, 2016, 11:42 PM
Hi Daniil,

I tried doing the same but, when I click Edit button, the popup does not show, and I see below error.



[TokenNotUniqueException: Token is not unique
-------------------
ID = ExtNetOnReadyBegin
TagName = anchor
Match = &lt;#:anchor id='ExtNetOnReadyBegin' /&gt;
]

So if it is working for you, it should work for me as well. Can you please share your project as well, so that I can make it working at my end as well.


Also I do agree that this is not approach that we should follow and I do understand consequences, but I said we are bounded by time, and we are new to Ext.NET too, so using too much right is really not an option for us. Also we dont have too many modal popup's that need to render Ext.NET controls, in fact three in total that need to render controls on popup, rest all of the controls will be in main view.

So Please upload your project as well, so that I can replicate at my end.

Thanks,
Puneet

geoffrey.mcgill
Jun 02, 2016, 1:38 AM
Please post a simplified sample demonstrating what you have working so far.

Your sample must only include the minimum amount of code required to reproduce the problem.

Please review the Forum Guidelines (http://forums.ext.net/showthread.php?3440) for tips on posting in the forums.

geoffrey.mcgill
Jun 02, 2016, 1:41 AM
Actually, I read through this thread again, and this scenario is not supported by Ext.NET.

If you can post a very simplified sample demonstrating the problem, then we might be able to assist, otherwise, this is out of scope of what we can support.

puns11
Jun 02, 2016, 5:44 PM
Alright you left me with no option but to go with more usage of Ext.NET to render partial on popup. I have taken up this to my client about the problem, and they are ready accommodate estimates accordingly, but now I am trying to load the partial view as given example, but now results are quite weird.

There are two issues:
1. I am not sure how to pass the ID of GridPanel model to Url.Action when Row is double clicked.
2. Results coming out is quite weird when PartialViewResult is loaded into Window. ( I have hard coded the id parameter that is required for the EditDetail action).

I have uploaded the full working project [EDIT: REMOVED]. Please check and let me know what is the resolution.

Functionality expected:
1. Render Partial View as a pop up in front with its content (content may or may not have Ext.NET controls, depending on the requirements) on Row Double click.
2. On Grid Panel Row right click I have added Context Menu, which further passing the ID from Selected Row to Action to remove the data, and then return to view with updated Model. But seems like the View is not getting updated.

Thanks,
Puneet

geoffrey.mcgill
Jun 02, 2016, 6:53 PM
Please simplify your code sample and post in the forums between [CODE] tags.

We must be able to copy + paste your code sample into a local test project and run without have to make major modifications.

We do not open .zip files.

puns11
Jun 03, 2016, 9:59 AM
I have already shared one of the example in zip file, as asked by fabricio. Also we have already purchased ext.net license, and I have posted the same issue in 4.X premium support, but fabricio asked me to continue with this thread. So I believe I can expect this much support from you to that you can download my given example at your end and see the issue. I have no issue in posting code in [CODE] tag, but also please stick to one protocol so that my work is not delayed because of this thing.

Thanks,
Puneet

geoffrey.mcgill
Jun 03, 2016, 4:15 PM
Hi Puneet,

We use the Forum Guidelines as the basis for our policies:

http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics

As well, the following threads provide forum posting tips:

http://forums.ext.net/showthread.php?10205-More-Information-Required
http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples


I have no issue in posting code in [CODE] tag

Perfect, thank you. We'll test your simplified sample once posted, and we'll provide some feedback.

I'll move this thread to the Premium Forums.

geoffrey.mcgill
Jun 03, 2016, 4:17 PM
Hi Puneet,

If you email support@ext.net with your forum username and Customer Number or the Transaction ID from your purchase, we can upgrade your forum account to a Premium Member.

puns11
Jun 11, 2016, 11:46 AM
Alright here is my code:

CompanyModel.vb




Imports System.Collections
Imports System.Collections.Generic

Namespace ExtNETExamples
Public Class CompanyModel
Public Property ID() As Integer
Get
Return m_ID
End Get
Set
m_ID = Value
End Set
End Property
Private m_ID As Integer
Public Property Name() As String
Get
Return m_Name
End Get
Set
m_Name = Value
End Set
End Property
Private m_Name As String
Public Property Price() As Double
Get
Return m_Price
End Get
Set
m_Price = Value
End Set
End Property
Private m_Price As Double
Public Property Change() As Double
Get
Return m_Change
End Get
Set
m_Change = Value
End Set
End Property
Private m_Change As Double
Public Property PctChange() As Double
Get
Return m_PctChange
End Get
Set
m_PctChange = Value
End Set
End Property
Private m_PctChange As Double
Public Property LastChange() As DateTime
Get
Return m_LastChange
End Get
Set
m_LastChange = Value
End Set
End Property
Private m_LastChange As DateTime
Public Property companyList As List(Of CompanyModel)
Public Function GetAll() As List(Of CompanyModel)
Dim today As DateTime = DateTime.Today

Return New List(Of CompanyModel)() From {
New CompanyModel() With {
.ID = 1,
.Name = "3m Co",
.Price = 71.72,
.Change = 0.02,
.PctChange = 0.03,
.LastChange = today
},
New CompanyModel() With {
.ID = 2,
.Name = "Alcoa Inc",
.Price = 29.01,
.Change = 0.42,
.PctChange = 1.47,
.LastChange = today
},
New CompanyModel() With {
.ID = 3,
.Name = "Altria Group Inc",
.Price = 83.81,
.Change = 0.28,
.PctChange = 0.34,
.LastChange = today
},
New CompanyModel() With {
.ID = 4,
.Name = "American Express Company",
.Price = 52.55,
.Change = 0.01,
.PctChange = 0.02,
.LastChange = today
},
New CompanyModel() With {
.ID = 5,
.Name = "American International Group, Inc.",
.Price = 64.13,
.Change = 0.31,
.PctChange = 0.49,
.LastChange = today
},
New CompanyModel() With {
.ID = 6,
.Name = "AT&T Inc.",
.Price = 31.61,
.Change = -0.48,
.PctChange = -1.54,
.LastChange = today
}
}
End Function

Public Shared Function GetAllCompanies() As IEnumerable(Of CompanyModel)
Dim now As DateTime = DateTime.Now

Return New Object() {New CompanyModel() With{.Name="3m Co", .Price=71.72, .Change=0.02, .PctChange=0.03, .LastChange=now},
New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, now},
New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, now},
New Object() {"American Express Company", 52.55, 0.01, 0.02, now},
New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, now},
New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, now}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, now},
New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, now},
New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now},
New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, now},
New Object() {"General Electric Company", 34.14, -0.08, -0.23, now}, _
New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, now},
New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, now},
New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now},
New Object() {"Intel Corporation", 19.88, 0.31, 1.58, now},
New Object() {"International Business Machines", 81.41, 0.44, 0.54, now},
New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, now}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now},
New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, now},
New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, now},
New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, now},
New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, now},
New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, now}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now},
New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, now},
New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, now},
New Object() {"Verizon Communications", 35.57, 0.39, 1.11, now},
New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}}
End Function
End Class
End Namespace



HomeController.vb



Imports System.Web.Mvc
Imports System.Linq
Imports ExtNETExamples.ExtNETExamples
Imports Ext.Net.MVC
Imports Ext.Net

Namespace Controllers
Public Class HomeController
Inherits Controller

' GET: Home
Function Index() As ActionResult
Dim companyModel As New CompanyModel
companyModel.companyList = companyModel.GetAll()
Return View(companyModel)
End Function
Function EditDetail(id As Integer, containerId As String) As ActionResult
Dim cmModel As New CompanyModel
cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
If(cmModel.companyList IsNot Nothing)
For each item In cmModel.companyList
cmModel.ID = item.ID
cmModel.Name= item.Name
cmModel.Price = item.Price
cmModel.PctChange = item.PctChange
cmModel.LastChange = item.LastChange
cmModel.Change = item.Change
Next

End If
Dim ret As New Ext.Net.MVC.PartialViewResult()
ret.ViewName = "_CompanyDetail"
ret.Model = cmModel
ret.ContainerId = containerId
ret.RenderMode = RenderMode.InsertTo

Me.GetCmp(Of Window)(containerId).Show()
Return ret
End Function

Function RemoveCompany(id As Integer) As ActionResult
Dim cmModel As New CompanyModel
cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID <> id).ToList()
Return View("Index",cmModel)
End Function
End Class
End Namespace



Home


@ModelType ExtNETExamples.ExtNETExamples.CompanyModel
@Code
ViewData("Title") = "Index"
End Code
@(Html.X().ResourceManager())
<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
@(Html.X().Menu().ID("ContextMenu").Items(
Html.X().MenuItem().Text("Delete Contact"),
Html.X().MenuItem().Text("Avery 5164"),
Html.X().MenuItem().Text("Copy"),
Html.X().MenuItem().Text("Envelope")
)
)

@Html.X().Menu().ID("GirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
ls.Click.Confirmation.ConfirmRequest = True
ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
ls.Click.Url = Url.Action("RemoveCompany")
ls.Click.ExtraParams.Add(New Parameter("id", "#{GirdContextMenu}.param1", mode:=ParameterMode.Raw))
End Sub))

@(Html.X().GridPanel() _
.Title("Editable GridPanel") _
.Width(600) _
.Height(350) _
.ID("indexGrid") _
.Store(Html.X().Store() _
.ID("Store23") _
.Model(Html.X().Model() _
.IDProperty("IDs") _
.Fields(
New ModelField("ID", ModelFieldType.Int),
New ModelField("Name"),
New ModelField("Price", ModelFieldType.Float),
New ModelField("Change", ModelFieldType.Float),
New ModelField("PctChange", ModelFieldType.Float),
New ModelField("LastChange", ModelFieldType.Date)
)
) _
.DataSource(Model.companyList)
) _
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("ID").Width(35),
Html.X().Column() _
.Text("Name") _
.DataIndex("Name") _
.Flex(1),
Html.X().Column() _
.Text("Price") _
.DataIndex("Price") _
.Renderer(RendererFormat.UsMoney),
Html.X().Column() _
.Text("Change") _
.DataIndex("Change"),
Html.X().Column() _
.Text("PctChange") _
.DataIndex("PctChange"),
Html.X().DateColumn() _
.Text("Last Updated") _
.DataIndex("LastChange") _
.Format("yyyy-MM-dd")
).View(Html.X().GridView().ID("indexGridView").DirectEvents(Sub(ls)
ls.RowDblClick.Url = Url.Action("EditDetail", New With {.id = 2, .containerId = "detailWindow"})

End Sub
).Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();#{GirdContextMenu}.param1 = record.data.ID; #{GirdContextMenu}.showAt(e.getXY()); return false;")))


@Html.X().Window().ID("detailWindow").Modal(True).Hidden(True).AlwaysOnTop(True)




Shared/_CompanyDetail.vbhtml


@ModelType ExtNETExamples.ExtNETExamples.CompanyModel
@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@<div Class="modal-dialog">
<div Class="modal-content">
<div Class="modal-header">
<Button type="button" Class="close" data-dismiss="modal" aria-hidden="true" >&times;</Button>
<h4 Class="modal-title" id="myModal-label">Modal title</h4>
</div>
<div Class="modal-body">

<div Class="form-horizontal">
<h4> CompanyModel</h4>
<hr />
@Html.ValidationSummary(True, "", New With {.class = "text-danger"})
@Html.HiddenFor(Function(model) model.ID)



<div Class="form-group">
@Html.X().FormPanelFor(Model)
</div>
</div>

</div>
<div Class="modal-footer">
<Button type="button" Class="btn btn-default" data-dismiss="modal" onclick="$('#myModal2').hide();">Close</Button>
<Button type="button" Class="btn btn-primary">Save</Button>
</div>
</div>
</div>
End Using







You should see the problem when you run this code, that partial view return is being render in completely weird manner, html is getting render outside window which is strange, and form panel in window.

Our requirement is that, we want to render partial view the way we are doing right now, but now we have purchased the ext.net, we want to simply use these controls on our partial views and render it simply.

Since this is an example for your team, but in my actual problem we are trying to render Ext.NET GridPanel on _CompanyDetail and that too with Editable plugin. And we need to submit the data using model so editable grid should save it. So lets try to solve the first problem, and then we will move to the second one.


Thanks,
Puneet

mwiater
Jun 13, 2016, 5:10 PM
Hey Team,

Gentle reminder! we are waiting for positive response.

Thanks.

fabricio.murta
Jun 14, 2016, 8:51 AM
Hello! We are analyzing the sample code.

Not really sure, why the example has a 'create' link, and a 'context menu' that shows 'delete ID' on it?

Correct me if I am wrong, but to reproduce the error, we have to double click a company on the panel, right? The context menu and 'create' action link are disposable and not necessary to reproduce the error then, or did I get it wrong?

I see when I double click a company that an Ext.NET window and a grayed out window with "close" and "save" buttons is shown in background, this happens because you are loading from partial view some HTML code -and- Ext.NET code to draw the window contents into the Ext.NET window with ID detailWindow. That's why the window contents only (the fields) are drawn on the Ext.NET window and you get the non-ext window grayed out and somewhere else. Simply put, you are redirecting the company details to the Ext.NET window while appending HTML to make that "modal non-Ext window", so it gets what you got.

mwiater
Jun 14, 2016, 2:46 PM
Correct me if I am wrong, but to reproduce the error, we have to double click a company on the panel, right? The context menu and 'create' action link are disposable and not necessary to reproduce the error then, or did I get it wrong?


Yes, on Row double click you can reproduce the issue. Context Menu and Create Action link are just part of example project but are disposable.





That's why the window contents only (the fields) are drawn on the Ext.NET window and you get the non-ext window grayed out and somewhere else


So what is the correct approach to render the partial view in my example?

fabricio.murta
Jun 15, 2016, 8:33 PM
Hello!

Just a quick feedback, we have discussed the issue and be posting the running version soon, sorry for the delay! It seems it would be enough to wrap your modal window in an Ext.NET container and that would make it, but we'll see to it.

Daniil
Jun 16, 2016, 11:23 AM
Hello,

Yes, wrapping the entire partial view's content into an Ext.NET Container is the best solution for a Razor partial view with mixed content - common HTML stuff and Ext.NET components.

With C# (.cshtml) the syntax looks like:

@(Html.X().Container()
.Height(100)
.Content(
@<text>
<input type="button" value="HTML Button">
@Html.X().Button().Text("Ext.NET Button")
</text>
)
)

I don't know what the syntax is for .vbhtml and gave up trying to find it out. Since you are more familiar with .vbhtml, I guess already know or find out quickly how to achieve the same with .vbhtml stuff.

So, on my side for the sake of testing I replaced yours _CompanyDetail.vbhtml with an identical .cshtml wrapped everything in an Ext.NET Container.

_CompanyDetail.cshtml

@model ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container()
.Content(
@<text>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div Class="modal-dialog">
<div Class="modal-content">
<div Class="modal-header">
<Button type="button" Class="close" data-dismiss="modal" aria-hidden="true">&times;</Button>
<h4 Class="modal-title" id="myModal-label">Modal title</h4>
</div>
<div Class="modal-body">
<div Class="form-horizontal">
<h4> CompanyModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { Class = "text-danger" })
@Html.HiddenFor(m => Model.ID)

<div Class="form-group">
@Html.X().FormPanelFor(Model)
</div>
</div>

</div>
<div Class="modal-footer">
<Button type="button" Class="btn btn-default" data-dismiss="modal" onclick="$('#myModal2').hide();">Close</Button>
<Button type="button" Class="btn btn-primary">Save</Button>
</div>
</div>
</div>
}
</text>
)
)

On Index.vbhtml please add width for the Window, because in the given scenario it is not going to be resized automatically to fit the content.

@Html.X().Window().ID("detailWindow").Width(800)...

As for the EditDetail controller action, please:

Replace RenderMode.InstertTo with RenderMode.AddTo since it is more suitable for the given scenario
Add ret.ClearContainer = True because the Window's content is not going to be cleared automatically on rendering new content for each new row.


EditDetail Controller Action

Function EditDetail(id As Integer, containerId As String) As ActionResult
Dim cmModel As New CompanyModel
cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
If (cmModel.companyList IsNot Nothing) Then

For Each item In cmModel.companyList
cmModel.ID = item.ID
cmModel.Name = item.Name
cmModel.Price = item.Price
cmModel.PctChange = item.PctChange
cmModel.LastChange = item.LastChange
cmModel.Change = item.Change
Next

End If
Dim ret As New Ext.Net.MVC.PartialViewResult()
ret.ViewName = "_CompanyDetail"
ret.Model = cmModel
ret.ContainerId = containerId
ret.RenderMode = RenderMode.AddTo
ret.ClearContainer = True

Me.GetCmp(Of Window)(containerId).Show()
Return ret
End Function

I've not done any other changes with your code and it started working.

But. To me placing a Bootstrap Window into an Ext.NET Window doesn't look very good. Here is a screenshot. You might want to stick with the only Window - either Bootstrap or Ext.NET.

24645

puns11
Jun 16, 2016, 10:03 PM
Thanks Daniil,

But this part now seems to be show stopper. I tried using the same in _CompanyDetail.vbhtml but again I am getting error.


I don't know what the syntax is for .vbhtml and gave up trying to find it out. Since you are more familiar with .vbhtml, I guess already know or find out quickly how to achieve the same with .vbhtml stuff.

So, on my side for the sake of testing I replaced yours _CompanyDetail.vbhtml with an identical .cshtml wrapped everything in an Ext.NET Container.

I have put this below code now after finally founding out how to use <text> in vbhtml razor syntax



Here's the text of _CompanyDetail.vbhtml.


@ModelType ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container() _
.Content( _
@@<text>
@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@<div Class="modal-dialog">
<div Class="modal-content">
<div Class="modal-header">
<Button type = "button" Class="close" data-dismiss="modal" aria-hidden="true">&times;</Button>
<h4 Class="modal-title" id="myModal-label">Modal title</h4>
</div>
<div Class="modal-body">
<div Class="form-horizontal">
<h4> CompanyModel</h4>
<hr />
@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
@Html.HiddenFor(Function(model) model.ID)
<div Class="form-group">
@Html.X().FormPanelFor(Model)
</div>
</div>
</div>
<div Class="modal-footer">
<Button type = "button" Class="btn btn-default" data-dismiss="modal" onclick="$('#myModal2').hide();">Close</Button>
<Button type = "button" Class="btn btn-primary">Save</Button>
</div>
</div>
</div>
End Using
</text>
))






But now error I am getting is error Can you please check what wrong I am doing here?

24647

Thanks,
Puneet

Daniil
Jun 17, 2016, 10:39 AM
Your code triggers the error on @Html.ValidationSummary(), but not on @Html.X().FormPanelFor().

If strip the partial view down to this, the issue is still reproducible.

@ModelType ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container() _
.Content(
@@<text>
@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@<div>
@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
</div>
End Using
</text>
)
)

I could not find a way to get @Html.ValidationSummary() working, but, unfortunately, I (and nobody from us) are not a VB.NET MVC Razor syntax expert. I only used Google trying to find a solution. Now I am even not sure if it is possible in VB.NET. Maybe, you could ask some VB.NET experts on a specialized forum.

puns11
Jun 17, 2016, 12:57 PM
Alright I made quite a progress with vb syntax.

_CompanyDetail.vbhtml



@ModelType ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container() _
.Content(
@@<text>
@Using (Html.BeginForm()) _
@Html.AntiForgeryToken()
@<div Class="modal-content">
<div Class="modal-body">
<div Class="form-horizontal">
<h4> CompanyModel</h4>
<hr />
#@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
#@Html.HiddenFor(Function(model) model.ID)
<div Class="form-group">

#@Html.X().Menu().ID("PartialGirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
ls.Click.Confirmation.ConfirmRequest = True
ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
ls.Click.Url = Url.Action("RemoveCompany")
ls.Click.ExtraParams.Add(New Parameter("id", "#{PartialGirdContextMenu}.param1", mode:=ParameterMode.Raw))
End Sub))

#@(Html.X().GridPanel() _
.ID("partialGrid") _
.Store(Html.X().Store() _
.ID("StorePartial") _
.Model(Html.X().Model() _
.IDProperty("partialIDs") _
.Fields(
New ModelField("ID", ModelFieldType.Int),
New ModelField("Name"),
New ModelField("Price", ModelFieldType.Float),
New ModelField("Change", ModelFieldType.Float),
New ModelField("PctChange", ModelFieldType.Float),
New ModelField("LastChange", ModelFieldType.Date)
)
) _
.DataSource(Model.companyList)
) _
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("ID").Width(35),
Html.X().Column() _
.Text("Name") _
.DataIndex("Name") _
.Flex(1),
Html.X().Column() _
.Text("Price") _
.DataIndex("Price") _
.Renderer(RendererFormat.UsMoney),
Html.X().Column() _
.Text("Change") _
.DataIndex("Change"),
Html.X().Column() _
.Text("PctChange") _
.DataIndex("PctChange"),
Html.X().DateColumn() _
.Text("Last Updated") _
.DataIndex("LastChange") _
.Format("yyyy-MM-dd")
).View(Html.X().GridView().ID("partialGridView").Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();App.PartialGirdContextMenu.showAt(e. getXY()); return false;")))
</div>
</div>
</div>
<div Class="modal-footer">
<input type="button" Class="btn btn-primary" onclick="alert('el');" value="Save"/>
</div>
</div>
End Using
</text>
)))



Index.vbhtml



@ModelType ExtNETExamples.ExtNETExamples.CompanyModel
@Code
ViewData("Title") = "Index"
End Code
@(Html.X().ResourceManager())
<h2>Index</h2>


@(Html.X().Menu().ID("ContextMenu").Items(
Html.X().MenuItem().Text("Delete Contact"),
Html.X().MenuItem().Text("Avery 5164"),
Html.X().MenuItem().Text("Copy"),
Html.X().MenuItem().Text("Envelope")
)
)

@Html.X().Menu().ID("GirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
ls.Click.Confirmation.ConfirmRequest = True
ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
ls.Click.Url = Url.Action("RemoveCompany")
ls.Click.ExtraParams.Add(New Parameter("id", "#{GirdContextMenu}.param1", mode:=ParameterMode.Raw))
End Sub))

@(Html.X().GridPanel() _
.Title("Editable GridPanel") _
.Width(600) _
.Height(350) _
.ID("indexGrid") _
.Store(Html.X().Store() _
.ID("Store23") _
.Model(Html.X().Model() _
.IDProperty("IDs") _
.Fields(
New ModelField("ID", ModelFieldType.Int),
New ModelField("Name"),
New ModelField("Price", ModelFieldType.Float),
New ModelField("Change", ModelFieldType.Float),
New ModelField("PctChange", ModelFieldType.Float),
New ModelField("LastChange", ModelFieldType.Date)
)
) _
.DataSource(Model.companyList)
) _
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("ID").Width(35),
Html.X().Column() _
.Text("Name") _
.DataIndex("Name") _
.Flex(1),
Html.X().Column() _
.Text("Price") _
.DataIndex("Price") _
.Renderer(RendererFormat.UsMoney),
Html.X().Column() _
.Text("Change") _
.DataIndex("Change"),
Html.X().Column() _
.Text("PctChange") _
.DataIndex("PctChange"),
Html.X().DateColumn() _
.Text("Last Updated") _
.DataIndex("LastChange") _
.Format("yyyy-MM-dd")
).View(Html.X().GridView().ID("indexGridView").DirectEvents(Sub(ls)
ls.RowDblClick.Url = Url.Action("EditDetail")
ls.RowDblClick.ExtraParams.Add(New Parameter("id", "record.data.ID", mode:=ParameterMode.Raw))
ls.RowDblClick.ExtraParams.Add(New Parameter("containerId", "detailWindow", mode:=ParameterMode.Value))

End Sub
).Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();#{GirdContextMenu}.param1 = record.data.ID; #{GirdContextMenu}.showAt(e.getXY()); return false;")))
@Html.X().Window().ID("detailWindow").Modal(True).Hidden(True).Shadow(True).Width(800) .AutoUpdateLayout(True)


Now if you run this code for the first time. Like Double click on GridPanel Row on Index page to view the Window with Partial view.
Right click on GridPanel on Window. It runs fine now. Though I am still need to get rid of # sign, that I had to use in vbhtml to say that Statement is ended.
but Now close the window, and again double click on row of index page. You will not the results, None of the ext.net controls got rendered this time. Now again close this window, and again do double click operation on row of index page, now nothing will be rendered. Not even html part, just white blank window.
Quite strange right.

Now at this point, I think something fishy is happening inside the controller. Can you please take a look at this issue, meanwhile I look at how to get rid of # signs?

HomeController.vb


Imports System.Web.Mvc
Imports System.Linq
Imports ExtNETExamples.ExtNETExamples
Imports Ext.Net.MVC
Imports Ext.Net

Namespace Controllers
Public Class HomeController
Inherits Controller

' GET: Home
Function Index() As ActionResult
Dim companyModel As New CompanyModel
companyModel.companyList = companyModel.GetAll()
Return View(companyModel)
End Function
Function EditDetail(id As Integer, containerId As String) As ActionResult
Dim cmModel As New CompanyModel
cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
If(cmModel.companyList IsNot Nothing)
For each item In cmModel.companyList
cmModel.ID = item.ID
cmModel.Name= item.Name
cmModel.Price = item.Price
cmModel.PctChange = item.PctChange
cmModel.LastChange = item.LastChange
cmModel.Change = item.Change
Next

End If
'Me.GetCmp(Of Container)(containerId).Show()
Dim ret As New Ext.Net.MVC.PartialViewResult()
ret.ViewName = "_CompanyDetail"
ret.Model = cmModel
ret.ContainerId = containerId
ret.RenderMode = RenderMode.AddTo
ret.ClearContainer = True
Me.GetCmp(Of Window)(containerId).Show()

Return ret
End Function

Function RemoveCompany(id As Integer) As ActionResult
Dim cmModel As New CompanyModel
cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID <> id).ToList()
Return View("Index",cmModel)
End Function
End Class
End Namespace


Edited:
I am not sure if this is helpful for you to debug, but I see this error in console, when Row is double clicked for second time.

Uncaught TypeError: Cannot read property 'lockingPartnerContext' of undefined
24649

Daniil
Jun 17, 2016, 1:37 PM
Yes, I have also noticed a JavaScript error and it led me to the right direction that the problem lies on client side, not in the controller.

Please set .DestroyContent(True) for the top level Container in the partial view:

@(Html.X().Container().DestroyContent(True)

This setting is false by default, but in your scenario of mixing HTML and Ext.NET controls this settings needs to be set to true.

puns11
Jun 17, 2016, 10:22 PM
Hi Daniil,

using .DestryContent helped, but now another issue which I am not able to understand, and also not sure if this is vb.net issue or Ext.Net issue, that I am not able to pass the parameters to ContextMenu, since in Ext.NET we have to use # sign to call the ContextMenu control and then set parameter value something like this


#{PartialGirdContextMenu}.param1= record.data.ID

_CompanyDetail.vbhtml


@ModelType ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container() _
.Content(
@@<text>
@Using (Html.BeginForm()) _
@Html.AntiForgeryToken()
@<div Class="modal-content">
<div Class="modal-body">
<div Class="form-horizontal">
<h4> CompanyModel</h4>
<hr />
#@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
#@Html.HiddenFor(Function(model) model.ID)
<div Class="form-group">

#@Html.X().Menu().ID("PartialGirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
ls.Click.Confirmation.ConfirmRequest = True
ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
ls.Click.Url = Url.Action("RemoveCompany")
ls.Click.ExtraParams.Add(New Parameter("id", "#{PartialGirdContextMenu}.param1", mode:=ParameterMode.Raw))
End Sub))

#@(Html.X().GridPanel() _
.ID("partialGrid") _
.Store(Html.X().Store() _
.ID("StorePartial") _
.Model(Html.X().Model() _
.IDProperty("partialIDs") _
.Fields(
New ModelField("ID", ModelFieldType.Int),
New ModelField("Name"),
New ModelField("Price", ModelFieldType.Float),
New ModelField("Change", ModelFieldType.Float),
New ModelField("PctChange", ModelFieldType.Float),
New ModelField("LastChange", ModelFieldType.Date)
)
) _
.DataSource(Model.companyList)
) _
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("ID").Width(35),
Html.X().Column() _
.Text("Name") _
.DataIndex("Name") _
.Flex(1),
Html.X().Column() _
.Text("Price") _
.DataIndex("Price") _
.Renderer(RendererFormat.UsMoney),
Html.X().Column() _
.Text("Change") _
.DataIndex("Change"),
Html.X().Column() _
.Text("PctChange") _
.DataIndex("PctChange"),
Html.X().DateColumn() _
.Text("Last Updated") _
.DataIndex("LastChange") _
.Format("yyyy-MM-dd")
) _
.View(Html.X().GridView().ID("partialGridView").Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();#{PartialGirdContextMenu}.param1= record.data.ID;#{PartialGirdContextMenu}.showAt(e. getXY()); return false;")))
</div>
</div>
</div>
<div Class="modal-footer">
<input type="button" Class="btn btn-primary" onclick="alert('el');" value="Save"/>
</div>
</div> End Using
</text>
).DestroyContent(True)))



Is there any other way I can pass the parameters values to context menu, where I dont have to use # sign? I tried App.PartialGirdContextMenu.param1, but it does not work.

Its quite a bizarre situation for me where nothing seems to be working for me either some ext.net issue or vb.net. Please help.

Daniil
Jun 17, 2016, 10:54 PM
Please replace all #{PartialGirdContextMenu} occurrences with App.PartialGirdContextMenu and it will start working - just tested.

Actually, it is best not to use #{} syntax in Razor Views at all.

puns11
Jun 17, 2016, 11:33 PM
wolah !! I am wondering, why it was not working when I wrote it earlier.

Anyways, I also got rid of # signs.

In vb.net, looks like when we have to put content in <text> tags, then everything needs to be in one line, as per my search I came accross this article (http://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-vb), which suggests how to use <text> tags in vb syntax.

So Looks like I am done with my current problems. But there will be many more coming when I will be using more Ext.NET in our application. I still need to figure out how to save Editable data grid data on post submit using model. I will first give it a try, if you are already aware please save my time.

Thanks guys for quick and helpful responses.

Daniil
Jun 25, 2016, 9:28 AM
Anyways, I also got rid of # signs.

Nice to hear! Actually, I've bookmarked this thread for VB.NET Razor tips.


I still need to figure out how to save Editable data grid data on post submit using model. I will first give it a try, if you are already aware please save my time.

Anyways, it would be best to discuss in an individual thread. If it is still actual, please start a new forum thread (in Premium forums - that way we don't miss it).