I have a button (create Application) if i click on a button a fragmented dialog will be appearing . here am able to show fragmented dialog .but internalization(i18n) is not appearing for the fields. (For xml files able to show i18n but for fragment.xml file not able to show i18n/)
component.js:
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.gss.program.view.App",
type : "JS",
viewData : { component : this }
});
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/appTexts_fr.properties"
});
oView.setModel(i18nModel, "i18n");
return oView;
}
Controller.js:
createApplication: function (oEvent) {
if (!this.oDialogFragment) {
this.oDialogFragment = sap.ui.xmlfragment("sap.gss.program.view.myFragment",
this);
}
this.oDialogFragment.open();
}
fragment.xml:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<Dialog
title="{i18n>Title}"
class="sapUiPopupWithPadding" >
<HBox>
<Text text="{i18n>Description_TEXT}" > </Text>
</HBox>
<beginButton>
<Button text="{i18n>Ok}" press="DialogButton" />
</beginButton>
<endButton>
<Button text="{i18n>Cancel}" press="CloseButton" />
</endButton>
</Dialog>
</core:FragmentDefinition>
You can use the dependents aggregation, to connect up the dialog to the view; you don't need to set any models explicitly.
So in your case you would do this:
createApplication: function (oEvent) {
if (!this.oDialogFragment) {
this.oDialogFragment = sap.ui.xmlfragment("sap.gss.program.view.myFragment", this);
}
this.getView().addDependent(oDialogFragment); // <--
this.oDialogFragment.open();
}
See my answer to 'What is the usage of "dependents" aggregation in SAPUI5?' for more details.
you should set the i18n resource model for the dialog fragment as well.
createApplication: function(oEvent) {
if (!this.oDialogFragment) {
this.oDialogFragment = sap.ui.xmlfragment("sap.gss.program.view.myFragment", this);
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/appTexts_fr.properties"
});
this.oDialogFragment.setModel(i18nModel, "i18n");
}
this.oDialogFragment.open();
}
Its often the easiest way esp. for a ResourceModel to just set it globally:
sap.ui.getCore().setModel(i18nModel, "i18n");
Now you can reference it from everywhere in your application and bind to it like you did, no need to ever set it again on view- or even control-level.
I had same problem, so setup model in Component globally and locally. It is working correctly.
sap.ui.getCore().setModel(i18nModel, "i18n");
this.setModel(i18nModel, "i18n");
Related
All , Say you have a code in a View like this.
<img src='#Url.Action("GetCaptchaImg")' alt='' />
and of course there is an Action named GetCaptchaImg in the controller which return a FileContentResult to View.
After open this view in FireFox. I found the Html code is
<img alt="" src="/Controllername/GetCaptchaImg" />
the src is not the real physical path . So My question is what is the real physical path of this img, How can I change the image by Ajax call to an Action? Hope you can help me . thanks.
You can make an ajax call to the actionresult and from that return the name of the image and onsuccess of your ajax call change the image
Alternatively you can do this thing, which i've implemented in my project
Make your HTML form like this
#using (Html.BeginForm("ActionResult", "Controller", FormMethod.Post, new { #id = "ImgForm", #enctype = "multipart/form-data", name = "ImgForm", target = "UploadTarget" }))
{
}
Make an iframe as target of your form
<iframe id="UploadTarget" name="UploadTarget" onload="UploadImage_Complete();" style="position: absolute;
left: -999em; top: -999em;"></iframe>
Your upload control
Then upload the Image and Show it on your form
function UploadImage() {
$("#ImgForm").submit(); //form id
}
function UploadImage_Complete() {
try {
//Check to see if this is the first load of the iFrame
if (isFirstLoad == true) {
isFirstLoad = false;
return;
}
//Reset the image form so the file won't get uploaded again
document.getElementById("ImgForm").reset();
//Grab the content of the textarea we named jsonResult . This shold be loaded into
//the hidden iFrame.
var newImg = $.parseJSON($("#UploadTarget").contents().find("#jsonResult")[0].innerHTML);
if (newImg.IsValid) {
document.getElementById("dp").src = newImg.ImagePath;
document.getElementById('profile-pic').src = newImg.ThumbnailPath;
document.getElementById("change").style.display = "block";
}
// If there was an error, display it to the user
if (newImg.IsValid == false) {
alert(newImg.Message);
return;
}
}
catch (e) {
}
}
Your Action will look like this
public WrappedJsonResult ChangeImage(HttpPostedFileBase file)
{
}
and your WrappedJsonResult class will look likes
public class WrappedJsonResult : JsonResult
{
public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.Write("<html><body><textarea id=\"jsonResult\" name=\"jsonResult\">");
base.ExecuteResult(context);
context.HttpContext.Response.Write("</textarea></body></html>");
context.HttpContext.Response.ContentType = "text/html";
}
}
I'm trying to use SignalR with MVC bundle, but having problem finding out how to include the /signalr/hubs script into the bundle. For now I have to insert the path in between jquery.signalR and my code. That will result in three javascript file requests.
Is there any way to include /signalr/hubs into my mvc bundle?
A bit late, but here is my contribution:
Create a javascript file with the following contents:
(function ($) {
$.ajax({
url: "/signalr/hubs",
dataType: "script",
async: false
});
}(jQuery));
Then add the file to the bundles collection.
This will load the "/signalr/hubs" code for you.
The default /signalr/hubs script is generated dynamically by the runtime on the first request and then cached.
You can use hubify.exe (see http://weblogs.asp.net/davidfowler/archive/2012/06/10/signalr-0-5-1-released.aspx for details) to pre-generate the file yourself, so you can add it into the MVC bundle.
I know this is an old thread but I would like to add the following for SignalR 2.x. I really wanted to bundle the proxy using SquishIt and by trial and error I managed to come up with the following:
using Microsoft.AspNet.SignalR
using Microsoft.AspNet.SignalR.Hubs
var resolver = new DefaultHubManager(new DefaultDependencyResolver());
var proxy = new DefaultJavaScriptProxyGenerator(resolver, new NullJavaScriptMinifier());
string iCanHazScriptNao = proxy.GenerateProxy("/signalr");
From asp.net, using the SignalR.Utils NuGet package, I found that I needed to be in the directory with the DLL that has the hub in it:
(assuming you have a standard solution structure and are using 2.2.0 of SignalR.Utils)
cd C:\YourSolution\YourProjectWithTheHub\bin\Debug
..\..\..\packages\Microsoft.AspNet.SignalR.Utils.2.2.0\tools\signalr.exe ghp
After running the tool, there will be a server.js file in the directory you ran it from (in this case, Debug).
(Note: I couldn't get it to work when specifying the path with the /p flag, and for some reason even when it does work, it creates a temp directory with the signalr.exe file in it)
I used #KTW response mentioned on this Thread and here is the complete change
BundleConfig
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/jquery-2.2.3.js",
"~/Scripts/jquery-ui-1.11.4.js",
"~/Scripts/jquery.multiselect.js",
"~/Scripts/jquery.dataTables.js",
"~/Scripts/jquery.jstepper.min.js",
"~/Scripts/underscore.min.js"
));
bundles.Add(new ScriptBundle("~/bundles/SignalRScripts").Include(
"~/Scripts/jquery.signalR-2.2.2.min.js",
"~/Scripts/signalRBundle.js",
"~/Scripts/Views/Search/SignalRFunctions.js"));
}
}
SignalRFunctions.js
$(function() {
// Declare a proxy to reference the hub.
var usersHub = $.connection.currentUsersHub;
//Create a function that the hub can call to broadcast messages.
usersHub.client.broadcastMessage = function(reservationNumber, usrName) {
//Message broadcast from server
//now find the id with reservationNumber on the page and to that append the user name
var id = '#' + reservationNumber;
if ($(id).length) {
if (usrName.length) {
itemsOpened($(id), usrName);
} else {
itemsClosed($(id));
}
}
//else {
// //is it possible that server broad casted for a reservationNumber and is not available at the client?
//}
};
//Accepts dictionary from hub and goes through search results
//https://stackoverflow.com/questions/7776337/reading-c-sharp-dictionary-in-javascript
usersHub.client.broadcastCollection = function (reservationNumberAndUsers) {
for (var resNumKey in reservationNumberAndUsers) {
if (reservationNumberAndUsers.hasOwnProperty(resNumKey)) {
//Message broadcast from server
//now find the id with ReservationNumber on the page and to that append the user name
var id = '#' + resNumKey;
if ($(id).length) {
if (reservationNumberAndUsers[resNumKey].length) {
itemsOpened($(id), reservationNumberAndUsers[resNumKey]);
} else {
itemsClosed($(id));
}
}
}
}
};
$.connection.hub.start().done(function() {
var searchedReservationNumbers = [];
if (typeof jsData !== 'undefined') {
if (jsData && jsData.length) {
for (var i = 0; i < jsData.length; i++) {
searchedReservationNumbers.push(jsData[i].UReservationNumber);
}
if (searcheduReservationNumbers.length !== 0) {
usersHub.server.getWorkingUsersOnUReservationNumber(searcheduReservationNumbers);
}
}
}
}).fail(function () { console.log('Could not Connect To SignalrHub!'); });
/*In case we would decide to continuously reconnect making connection to server.
$.connection.hub.disconnected(function() {
setTimeout(function() {
$.connection.hub.start();
},
5000); // Restart connection after 5 seconds.
});*/
function itemsOpened(elem, id) {
var item = "Opened By - " + id;
elem.prop('title', item);
elem.css('background-color', 'chocolate');
};
function itemsClosed(elem) {
elem.prop('title', "");
elem.css('background-color', '');
};
});
signalRBundle.js
(function ($) {
$.ajax({
url: "/signalr/hubs",
dataType: "script",
async: false
});
}(jQuery));
/* Source https://stackoverflow.com/questions/11556110/signalr-and-mvc-bundle */
SomePartialView.cshtml
Instead of writing below in above partial view
#using Localization
#using Newtonsoft.Json
#model NameSpace.ViewModels.FilterVM
#{
ViewBag.Title = Strings.Filter;
}
#using (Html.BeginForm())
{
<div class="large-12 columns">
---SOME CODE HERE
</div>
}
#section scripts
{
<script type="text/javascript" language="javascript">
var jsData = #Html.Raw(JsonConvert.SerializeObject(Model));
</script>
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/Views/Search/SignalRFunctions.js"></script>
}
This changed to
#using Localization
#using Newtonsoft.Json
#model NameSpace.ViewModels.FilterVM
#{
ViewBag.Title = Strings.Filter;
}
#using (Html.BeginForm())
{
<div class="large-12 columns">
---SOME CODE HERE
</div>
}
#section scripts
{
<script type="text/javascript" language="javascript">
var jsData = #Html.Raw(JsonConvert.SerializeObject(Model));
</script>
#Scripts.Render("~/bundles/SignalRScripts")
}
Notice
#Scripts.Render("~/bundles/SignalRScripts")
in partial view above.Without #KTW file above(ajax request to /signalr/hubs)
var usersHub = $.connection.currentUsersHub;
was always coming as null.
You can generate the code with the Microsoft.AspNet.SignalR.Utils NuGet package. Add that to your project, then you can add the below as a post-build script (Project -> {project name} Properties -> Build Events). It should be a post-build script and not pre- since you want it to build against your updated hub code after it's compiled.
It will find whatever version of the Microsoft.AspNet.SignalR.Utils package that you have installed and put the server.js file in the Scripts folder.
You must also have a version redirect for Newtonsoft.Json in your web.config file (assuming your project uses Newtonsoft.Json). This is because signalr.exe is built against version 6.0.0 and you're likely using a newer version. The /configFile switch is to tell it to use your project's config file so that it uses the redirect.
Post-build script:
cd $(ProjectDir)\Scripts
FOR /F "usebackq delims=" %%p IN (`dir ..\..\packages /b /ad ^| find "Microsoft.AspNet.SignalR.Utils"`) DO (
set "UTILSPATH=%%p"
)
$(SolutionDir)\packages\%UTILSPATH%\tools\net40\signalr.exe ghp /path:$(TargetDir) /configFile:$(TargetPath).config
Then include ~/Scripts/server.js in your bundle.
I was wondering if it is possible to make partialview with devexpress elements to work properly in Extjs panel. So far I managed to load partialview into Extjs panel.All devexpress controls are rendered in a proper way, however it seems that entire client side functinality of devexpress is gone - there is no reaction on hover, click etc. Here is my code
//loading partialView
Ext.getCmp('centerPanel').body.load({ url: 'Home/TempView',scripts:true})
//controller
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public PartialViewResult TempView()
{
return PartialView();
}
}
//TempView
<div>
#Html.Partial("ToolBarView");
</div>
//ToolBarView
#using DevExpress.Web.Mvc.UI
#Html.DevExpress().ReportToolbar(settings => {
// The following settings are necessary for a Report Toolbar.
settings.Name = "ReportToolbar";
settings.ReportViewerName = "reportViewer1";
}).GetHtml()
Is there any way to make it work ?
Here is my application
http://www.sendspace.pl/file/591cd7a07e43f15a22759b2
With the ExtJS contentEl property you can include any content in a panel.
//index.cshtml
<div id="dxGrid">
#Html.Partial("GridViewPartialView")
</div>
//GridViewPartialView.cshtml
#Html.DevExpress().GridView(settings =>
{
settings.Name = "DevExGrid";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartialView" };
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.ClientSideEvents.EndCallback = "function(s, e) { endSizeGrid(s); }";
}).Bind(Model).GetHtml()
//ExtJS code
Ext.create('Ext.panel.Panel', {
contentEl: 'dxGrid',
id: 'gridContainer',
title: 'Devexpress inside ExtJS'
});
Keep in mind that if you resize the panel you need to resize the DevEx grid manually. You can achieve this by setting a listener on the panel with the DevEx control on it.
listeners: {
resize: function () {
adjustGridSize(this, DevExGrid);
}
}
When you interact with the DevEx control it will resize too, that is why you need to specify a clientsideevent called EndCallBack.
The implementation of the resize functions looks something like this:
function endSizeGrid(sender) {
var el = Ext.get("gridContainer");
adjustGridSize(el, sender);
};
function adjustGridSize(aGridPnl, aGridView) {
aGridView.SetHeight(aGridPnl.getHeight());
aGridView.SetWidth(aGridPnl.getWidth());
};
I hope this will help someone.
I have two user controls on the page and one of the user control has this text aread.
which is used to add a note and but when they click add note button the page reloads.
I do not want the page to reload ,i was looking for an example which this is done without
postback.
Thanks
i tired doing this using JSON , but it throws the following error
The HTTP verb POST used to access path '/Documents/TestNote/Documents/AddNote' is not allowed.
<script type="text/javascript">
$(document).ready(function() {
$("#btnAddNote").click(function() {
alert("knock knock");
var gnote = getNotes();
//var notes = $("#txtNote").val();
if (gnote == null) {
alert("Note is null");
return;
}
$.post("Documents/AddNote", gnote, function(data) {
var msg = data.Msg;
$("#resultMsg").html(msg);
});
});
});
function getNotes() {
alert("I am in getNotes function");
var notes = $("#txtNote").val();
if (notes == "")
alert("notes is empty");
return (notes == "") ? null : { Note: notes };
}
</script>
</asp:Content>
Something like this would give you the ability to send data to an action do some logic and return a Json result then you can update your View accordingly.
Javascript Function
function AddNote(){
var d = new Date(); // IE hack to prevent caching
$.getJSON('/MyController/MyAction', { data: "hello world", Date: d.getTime() }, function(data) {
alert(data);
// call back update your view here
});
}
MyController Action
public virtual JsonResult MyAction(string data)
{
// do stuff with your data here, which right now my data equals hello world for this example
return Json("ReturnSomeObject");
}
What you want is AJAX update. There will always be a postback (unless you are satisfied with simple Javascript page update that does not save on the server), but it won't be the flashing screen effect any more.
i have the following javascript that gets HTML from somewhere and sticks it in a textarea for tinymce.
My question is how in asp.net-mvc i can get the HTML Here and stick it in the javascript?
Do i put this in ViewData?
function ajaxLoad() {
var ed = tinyMCE.get('elm1');
// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
ed.setContent('HTML Here');
}, 500);
}
i want to have something like this below, but it doesn't seem to work:
function ajaxLoad() {
var ed = tinyMCE.get('elm1');
// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
ed.setContent(<% ViewData["test"] %>);
}, 500);
}
I think an ajax call might suit you best, but also make sure you're trying <%= ViewData["test"], note the "=" after that first percent symbol. The example you gave won't emit the value of the ViewData field the way you have it there (maybe that was just a typo?).
If you're in an aspx or ascx page then you can do that exactly like in your example - with one minor change :
ed.setContent(<%= ViewData["test"] %>); // the equals sign
If you're in a *.js file then that won't work, but you could set
<input type="hidden" id="myTestData" value='<%=ViewData["test"]%>' />
in the aspx,ascx file and then get the value via jQuery:
$("#myTestData").val();
Edit: damn, I missed the ending %> on the <input line.
I use this;
In my view;
$.post("/jQueryTests/jQueryAddMessageComment", { commentText: commentText }, function(newComment) {
$("#divComments" + id.toString()).html(newComment);
});
Of if I am returning Json data then;
$.post("/Articles/jQueryDownVoteArticle", { id: id }, function(votes) { document.getElementById("ArticleVotes").innerHTML = votes; }, "json");
In my controller;
return PartialView("commentList", new FormViewModel { LastComment = commentText });
The important bit is how you return back to the view. You can also return like this;
return Json(new FormViewModel { LastComment = commentText });
Remember that the control you are replacing the html for needs to have a unique id.
Is this what you asked?