Lookup control "Get" action

Sep 24, 2011 at 7:27 PM

Hello,

I'm having trouble getting my single-select lookup to include a thumbnail picture in the readonly textbox. (similar to what you do in a multi select lookup)

  public ActionResult Get(int id)
        {
            var v = r.Get(id);
            return Json(new
            {
                Text = @"<img  src='" + Url.Content("~/pictures/Participants/" +
                Pic(v.Picture)) + "' class='mthumb' />" +
                v.LastName + ", " + v.FirstName
            });
        }

That makes the following appear in the readonly lookup textbox: 
Unexpected error<br />Message: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

Is there a safe way to put a thumbnail picture in my ActionResult?

Thank you

Coordinator
Sep 24, 2011 at 7:28 PM
Edited Sep 24, 2011 at 7:29 PM

sorry, but atm you wont be able to do this because it's a textbox input type='text' literally

so no, you can't

 

unless you modify something in the js or awesome views and you put a div or something instead

Sep 24, 2011 at 7:52 PM
Edited Sep 24, 2011 at 8:11 PM

Thanks for the prompt reply. 

I'm a bit uncomfortable modifying the awesome controls (guessing you mean the lookup.ascx and lookuppopup.ascx) because I'm still pretty newb, but I guess I have to.

Any tips on which files I need to modify in order to enable the singleselect input box to be able to include thumbnails just like the multiselect input box does?

Much appreciated!

edit: to clarify, i am mostly confused as to how you managed to include thumbnails in your multi select lookup input box like the meals search in http://mrgsp.md:8080/ProDinner

are you including a background image in the textbox css itself, for example?

Coordinator
Sep 24, 2011 at 8:33 PM
Edited Sep 24, 2011 at 8:33 PM

in lookup.ascx find the input type=text and replace it with a div

but now all calls to it with jquery .val() will have to be changed to .html()

Sep 24, 2011 at 9:35 PM

got it, thanks so much.

Sep 24, 2011 at 11:38 PM
Edited Sep 24, 2011 at 11:45 PM

Hm, I've been playing with this for a couple of hours now and I feel like I'm missing something.

Heres what I did:

 

<input type="hidden" id="<%=o %>" name="<%=Model.Prop %>" value="<%=Model.Value %>" />
<%--<input type="text" id="ld<%=o%>" disabled="disabled" <%=Model.HtmlAttributes %> />--%>
<div id="ld<%=o%>" <%=Model.HtmlAttributes %> class="ae-lookup-multidisplay ui-corner-all ui-widget-content"></div>

Every time I load a page with lookups on it this function from awesome.js gets called:
   this.loadLookupDisplay = function (o, url) {
        $('#ld' + o).val('');
        var id = $('#' + o).val();
        if (id) $.get(url, { id: id }, function (d) { $("#ld" + o).val(d); });
    }

Which on your advice I changed to:
   this.loadLookupDisplay = function (o, url) {
        $('#ld' + o).html('');
        alert("mgj changed val to html");
        var id = $('#' + o).html();
        if (id) $.get(url, { id: id }, function (d) { $("#ld" + o).html(d); });
    }

I realize there are other awesome.js functions I would have to change (choose, clear) but so far I can't even get just the simple display to work with the new div.

Any ideas?

Sep 25, 2011 at 1:53 PM
Edited Sep 25, 2011 at 2:22 PM

2 things:

Got firebug for chrome and it helps a ton. My Json action result I posted is still returning this error:

Unexpected error<br />
Message: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

I also changed the loadlookupDisplay awesome.js function to this and now the div is being correctly filled with content(i.e. the error message from above)
    this.loadLookupDisplay = function (o, url) {
        $('#ld' + o).html('');
        var id = $('#' + o).val();<-----if this is .html() the divs are not filled correctly
        if (id) $.get(url, { id: id }, function (d) { $("#ld" + o).html(d); });
    }

so I'm almost there, I just am not building my JSON result correctly to add the thumbnail it seems.
Sep 25, 2011 at 2:43 PM

Yeah, even something this simple returns that Unexpected JSON error. Seems like JSON action results dont work with the lookup's Get() action?

        public ActionResult Get(int id)
        {
           return Json(r.Get(id).LastName);
        }

Sep 25, 2011 at 3:04 PM

Finally got it. Gave up on JSON and did content return type following your original method:

        public ActionResult Get(int id)
        {
            var v = r.Get(id);
            return Content(
                (@"<img  src='" + Url.Content("~/pictures/Participants/" +
                Pic(v.Picture)) + "' class='mthumb' />") +
                (v ?? new Participant()).LastName + ", " +
                (v ?? new Participant()).FirstName);
        }

This works fine. The code seems a bit sloppy/unelegant, any way to clean this up? Otherwise, this + using the div works great.

 

Thank you for this!