How to use/add existing Media Library widget into a custom widget in Orchard CMS?

问题

I'm writing a custom widget, I want to create a form that contains an image picker that selects the image from the existing media library. I've noticed that I could use the existing Media Library widget, but I have no idea how to include it in my widget. Can I import it from the EditPart view somehow ?

[Update] Here is part of a sample code. Assuming you have this Edit Part template:

@using MediaLibrary.FilePicker //Is there a way to add it doing something like this??
@model Maps.Models.MapPart

<fieldset>
  <legend>Map Fields</legend>

   <div class="editor-label">
     @Html.LabelFor(model => model.Latitude)
   </div>
   <div class="editor-field">
      @Html.TextBoxFor(model => model.Latitude)
      @Html.ValidationMessageFor(model => model.Latitude)
   </div>

    <div class="editor-label">
      @Html.LabelFor(model => model.Longitude)
    </div>
    <div class="editor-field">
      @Html.TextBoxFor(model => model.Longitude)
      @Html.ValidationMessageFor(model => model.Longitude)
    </div>

</fieldset>

回答1:

Just add a media library picker field.

回答2:

I figured out how to do it.

I was trying to use the image picker from my custom widget. Here are the steps that I followed to accomplish this.

1.Add a reference to the MediaPicker libary into my Widget project. 2.Add the following code:

@using Orchard.ContentManagement
@using Orchard.Utility.Extensions
@using Orchard.MediaPicker
@model MyWidget.Models.PickerForm
<div class="editor-label">
    <label for="ImageUrl">Image Url</label>
</div>
<div class="editor-field">
    @Html.TextBoxFor(m => m.ImagePath, new { @class = "text single-line", @id = "ImageUrl" })<br />
    @Html.ValidationMessageFor(m => m.ImagePath)<br />
    <input type="button" class="button" id="PickImageUrl" value="Pick Image" />
</div>
@using (Script.Foot())
{
<script type="text/javascript">
    //<![CDATA[
    jQuery(function ($) {
        var baseUrl = "@HttpContext.Current.Request.ToRootUrlString().TrimEnd('/')";
        $("#PickImageUrl").click(function () {
            $("form").trigger("orchard-admin-pickimage-open",
            {
                img: $("#ImageUrl").val(),
                uploadMediaPath: "About",
                callback: function (data) {
                    $("#ImageUrl").val(baseUrl + data.img.src);
                }
            });
        });
    });
//]]>
</script>
}

And voila.

来源：https://stackoverflow.com/questions/31465855/how-to-use-add-existing-media-library-widget-into-a-custom-widget-in-orchard-cms

标签

orchardcms