How to send in ASP.NET the selected areas of an imagemap using imagemapster?

Question

I have a project in ASP.net webforms. I have a form and in that form I have a

<asp:ImageMap ID="imCarDiagram" runat="server" ImageUrl="~/Content/Resources/car-diagram.png" HotSpotMode="PostBack">
    <asp:PolygonHotSpot Coordinates="106,42,107,25,147,18,211,14,335,25,336,41,335,43,328,41,323,32,225,24,118,33,114,44,106,42" AlternateText="Front bumper" PostBackValue="FrontBumper" HotSpotMode="PostBack" />
    <%--<asp:PolygonHotSpot Coordinates="113,81,138,49,303,51,325,80,297,70,143,69,113,81" AlternateText ="Front of the car" PostBackValue="FrontOfTheCar" HotSpotMode="PostBack" />--%>
    <asp:PolygonHotSpot Coordinates="145,63,145,55,166,55,166,63,145,63" AlternateText="Left Headlight" PostBackValue="LeftHeadlight" HotSpotMode="PostBack" />
    <asp:PolygonHotSpot Coordinates="272,63,272,55,292,55,292,63,272,63" AlternateText="Right Headlight" PostBackValue="RightHeadlight" HotSpotMode="PostBack" />
    <asp:PolygonHotSpot Coordinates="105,185,135,155,138,134,110,105,110,86,122,75,142,70,153,118,159,176,105,185" AlternateText="Left Fender" PostBackValue="LeftFender" HotSpotMode="PostBack" />
    <asp:PolygonHotSpot Coordinates="142,69,154,125,158,176,282,177,283,129,294,69,142,69" AlternateText="Hood" PostBackValue="Hood" HotSpotMode="PostBack" />
    <asp:PolygonHotSpot Coordinates="281,177,282,129,294,69,315,75,329,87,329,105,311,119,299,142,303,162,333,185,281,177" AlternateText="Right Fender" PostBackValue="RightFender" HotSpotMode="PostBack" />
    <asp:CircleHotSpot X="101" Y="144" Radius="30" AlternateText="Left Wheel" PostBackValue="LeftWheel" HotSpotMode="PostBack" />
    <asp:CircleHotSpot X="335" Y="145" Radius="30" AlternateText="Right Wheel" PostBackValue="RightWheel" HotSpotMode="PostBack" />
</asp:ImageMap>

On the front end I'm using imagemapster to have the possibility to highlight multiple areas. All is working ok I can select multiple areas on the car diagram. How do I send the selected areas in my code behind when I click submit(onclick="submit_event" where I save the data) ?

Update 1

<asp:Button runat="server" ID="btnSave" Text="Save" OnClick="btnSave_Click" class="btn submit action-button btn-success" />

protected void btnSave_Click(object sender, EventArgs e)
{
    SaveClaim(code that is saving the rest of the fields);

}

How can I bring in btnSave_Click event the selected areas ?

@GeomanYabes I have an event `btnSave_Click` in witch I save other input fields in to the database. I don't know how to access the selected areas from the car diagram... — Neculai Andrei, Mar 01 '17 at 10:29

score 0 · Answer 1 · answered Mar 02 '17 at 10:33

Managed to resolve the problem. Solution: Add an invisible input and fill that input with an enumeration of the selected areas. Then use JS to fill that input with the enumeration.

var img = $('#img');
    $(img).mapster({
        onStateChange: function(){
         document.getElementById('#input_text').value = img.mapster('get')
         }
    });
});

How to send in ASP.NET the selected areas of an imagemap using imagemapster?

1 Answers1